kpma21.com Review

TitletagDescriptiontaglanguage
한국대중음악인연합회 Korean
Alexarank
49526
Ip adress111.92.189.32Nameserverns1.uhost.co.kr
ns2.uhost.co.kr
Status code200
robots.txt -http://kpma21.com/robots.txt
 <!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="ko" class="no-js ie6">    <![endif]-->
<!--[if IE 8 ]>    <html lang="ko" class="no-js ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="ko" class="no-js ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="ko" class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">

<meta name="description" content="KPMA 한국대중음악인연합회" />

<meta name="naver-site-verification" content="f2a013506c905842802df83a7a1d39fdd3fd5c95"/>

<meta property="og:title" content="한국대중음악인연합회"/>
         
<meta property="og:description" content="KPMA 한국대중음악인연합회"  />
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://kpma21.com/robots.txt"/>

                         
 <meta property="og:image" content="http://kpma21.com/theme/bootstrap_kpmat/img/og_thumb.jpg" />
 
                               
<meta property="og:image:width" content="612" />
<meta property="og:image:height" content="423" />
<meta name="viewport" content="width=device-width, initial-scale=1"><title>한국대중음악인연합회</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans&family=Jua&family=Quicksand:400,600&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,800" rel="stylesheet">
<link rel='stylesheet' id='google-fonts-css'  href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Open+Sans+Condensed:300,300italic|Mr+Dafoe' type='text/css' media='all' />
<link href="https://fonts.googleapis.com/css?family=Merriweather|Vollkorn:400,400i,600,600i&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Lustria" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Gothic+Coding:wght@700" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,700&family=Roboto:wght@100;300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Sans+TC:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/default.css">
<link rel=" icon" href="http://kpma21.com/theme/bootstrap_kpmat/img/favicon.ico" type="image/x-icon">
<!-- 부트스트랩 스타일 -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/bootstrap.min.css">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/bootstrap-directional-buttons.css">

<!-- 폰트어썸 스타일 -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/font-awesome.min.css">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/xeicon.min.css">
<!-- UIkit CSS -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/uikit.min.css" />
<!-- kpma 기본 스타일 -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/lib.css">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/board-common.css">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/plugins.css">
<!--wow.js plugin-->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/animate.min.css">

<!--nav style -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/bootNav-dark.css">

<!--nav mobile -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/feather-style.css">
<!-- jkpma custom style -->
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/gbm.css">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/gr-index.css">
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/academy.css">
<link rel="stylesheet" href="/mega_nav.css">

<!--[if lte IE 8]>
<link rel="stylesheet" href="http://kpma21.com/theme/bootstrap_kpmat/css/ie8.css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
// 자바스크립트에서 사용하는 전역변수 선언
var g5_url       = "http://kpma21.com";
var g5_bbs_url   = "http://kpma21.com/bbs";
var g5_is_member = "";
var g5_is_admin  = "";
var g5_is_mobile = "";
var g5_bo_table  = "";
var g5_sca       = "";
var g5_editor    = "";
var g5_cookie_domain = "";
</script>

<!-- script src="http://kpma21.com/js/jquery-1.8.3.min.js"></script -->
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/modernizr.js"></script>
<!-- 제이쿼리 -->
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/jquery-1.12.4.min.js"></script>
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/uikit.min.js"></script>
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/uikit-icons.min.js"></script>



<script src="http://kpma21.com/js/jquery.menu.js?ver=161020"></script>
<script src="http://kpma21.com/js/common.js?ver=161020"></script>
<script src="http://kpma21.com/js/wrest.js?ver=161020"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- academy 상수선언 -->
<!-- 부트스트랩 스크립트 -->
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/bootstrap.min.js"></script>

<script> 
var userAgent = navigator.userAgent.toLowerCase(); // 접속 핸드폰 정보 
   
// 모바일 홈페이지 바로가기 링크 생성 
if(userAgent.match('iphone')) { 
    document.write('<link rel="apple-touch-icon" href="http://kpma21.com/theme/bootstrap_kpmat/img/icon_ipon.png" />') 
} else if(userAgent.match('ipad')) { 
    document.write('<link rel="apple-touch-icon" sizes="72*72" href="http://kpma21.com/theme/bootstrap_kpmat/img/icon_ipon.png" />') 
} else if(userAgent.match('ipod')) { 
    document.write('<link rel="apple-touch-icon" href="http://kpma21.com/theme/bootstrap_kpmat/img/icon_ipon.png" />') 
} else if(userAgent.match('android')) { 
    document.write('<link rel="shortcut icon" href="http://kpma21.com/theme/bootstrap_kpmat/img/icon_android.png" />') 
} 
</script>
<script>
document.addEventListener("contextmenu", e => {
    e.target.matches("img") && e.preventDefault()
})
</script>

</head>
<body id="page-top" class="no-index gb_index       theme-is-light  middle-logo "  >

	<div id="peta-intro" class="loading " >
<!--
  <div class="bg-layer ">
 <div class="table">
 
   <div class="table-cell tbc-img">
    
    <div class="main">
      <div class="circle"></div>
      <div class="circle2"></div>
      <img src="/loader.png" alt="">
    </div>
    
     
    
   </div>
   
 </div>
 
 </div>
 -->
 <!--//bg-layer-->
  <div class="sq-spin" style="width:100%;
    height:100%;">
  <div class="table" style="width:100%;
    height:100%;">
    <div class="table-cell" style="position:relative; width:100%;
    height:100%; vertical-align:middle;">
    
    <div class="sq-sp">
    </div>
    <!--
    <div class="sq-in" style="display:inline-block; height:8em; width:8em; text-align:center; padding-top:4.5em;">
     <h2>MODEL</h2>
    </div>
    -->
    <img style=" height:8.5em; width:8.5em;" src="http://kpma21.com/theme/bootstrap_kpmat/img/sq-spin.png" alt="">
    
      </div>
      
    </div>
  </div>
 </div>
 
</div>
<!-- 상단 시작 { -->

<style>
a i{
	color:#333;
}
.mega-row{
	display: flex;
	flex-wrap: wrap;
}
.v-center{
	align-items: center;
}
.mega-master{
	position:fixed;z-index:999; width:100%; top:0; left:0;
}
.topper{
	position:relative;
}
.topper.fix-topper{
	display:none;
}
.header-top{ background:#666; color:#ffffff;}
.top-height{
	line-height:45px;
}
.topper .gbindex-logo{
	display:none;	
	text-align:center;
	background:#FFF;
	
}
/* header */
.mega-header{
	display: block;
	width: 100%;
	position: relative;
	z-index: 999;
	padding:15px;
	background:#FFF;
}
.mega-header.fixedheader{position:fixed;z-index:999999; width:100%; top:0; left:0;border-bottom: #CCC 1px solid;
    box-sizing: border-box;-webkit-animation-duration: 0.5s;
            animation-duration: 0.5s; -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;}
.mega-header .item-left{
	flex:0 0 17%;
}

.mega-header .logo a{
	font-size: 30px;
	color:#000000;
	font-weight: 700;
	text-decoration: none;
}
.mega-header .item-center{
	flex:0 0 66%;
}
.mega-header .item-right{
	flex:0 0 17%;
	display: flex;
	justify-content: flex-end;
}
.mega-header .item-right a{ 
     text-decoration: none;
     font-size: 16px;
     color:#555555;
     display: inline-block;
     margin-left: 10px;
     transition: color 0.3s ease;
}
.mega-header .menu > ul > li{
	display: inline-block;
	line-height: 50px;
	margin-left: 25px;
	min-width:50px;
}
.mega-header .menu > ul > li > a{
	font-size: 15px;
	font-weight: 500;
	color:#000000;
	position: relative;
	text-transform: capitalize;
	transition: color 0.3s ease;
	font-weight:600;
}
.mega-header .menu > ul > li .sub-menu{
	position: absolute;
	z-index: 500;
	background-color:#ffffff;
	box-shadow: -2px 2px 70px -25px rgba(0,0,0,0.3); 
	padding: 20px 30px;
	transition: all 0.5s ease;
	margin-top:25px;
	opacity:0;
	visibility: hidden;
	border-top:#000 3px solid;
}
.mega-header .logo{
		-webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
	}
	.mega-header.fixedheader .logo{
		-webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
			
		}
@media(min-width: 992px){
	
	.gb_index .menu-main{ text-align:center;}
	.gb_index .fixedheader .menu-main{ text-align:left;}
.gb_index .mega-header .logo{ display:none; margin-top:-10px; }
.gb_index .topper .gbindex-logo{ display:block;padding:50px 0 20px;}
.gb_index .mega-header.fixedheader .logo{display:block; }

.mega-header .menu > ul > li.menu-item-has-children:hover .sub-menu{
	margin-top: 10px;
	visibility: visible;
	opacity: 1;
}
}
 @-webkit-keyframes fadeInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }
         
         @keyframes fadeInDown {
            0% {
               opacity: 0;
               transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }
 @-webkit-keyframes fadeInUp{
            0% {
               opacity: 0;
               -webkit-transform: translateY(10px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }
         
         @keyframes fadeInUp {
            0% {
               opacity: 0;
               transform: translateY(10px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }
.menu-item-has-children a i{
	display:inline-block;
	margin-left:10px;
	color:#7d7d7d;
	font-weight:600;
	
}
.mega-header .menu > ul > li .sub-menu > ul > li{
	line-height: 1;
	text-align:left;
}
.mega-header .menu > ul > li .sub-menu > ul > li:hover{
	border-top:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
}
.mega-header .menu > ul > li .sub-menu > ul > li > a{
	display: inline-block;
	padding: 10px 0;
	font-size: 15px;
	color: #555555;
	transition: color 0.3s ease;
	text-decoration: none;
	text-transform: capitalize;
}
.mega-header .menu > ul > li .single-column-menu{
	min-width: 280px;
	max-width: 350px;
}
.mega-header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li{
   line-height: 1;
   display: block; 
}
.mega-header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
	padding:10px 0;
	display: inline-block;
	font-size: 15px;
	color:#555555;
	transition: color 0.3s ease;
}
.mega-header .menu > ul > li .sub-menu.mega-menu{ 
    left: 50%;
    transform: translateX(-50%);	
}

.mega-header .menu > ul > li .sub-menu.mega-menu-column-4{
  max-width: 1200px;
  width: 100%; 	
  display: flex;
  flex-wrap: wrap;
  padding:20px 15px;
}
.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
  flex:0 0 25%;
  padding:0 15px;
}
.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title{
	font-size: 16px;
	color:#ea4636;
	font-weight: 500;
	line-height: 1;
	padding:10px 0;
}
.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
	text-align: center;
}
.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
	max-width: 100%;
	width: 100%;
	vertical-align: middle;
	margin-top: 10px;
}
.mega-header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
.mega-header .menu > ul > li .sub-menu > ul > li > a:hover,
.mega-header .item-right a:hover,
.mega-header .menu > ul > li:hover > a{
	color:#ea4636;
}
/* banner section */
.banner-section{
  background-image: url('../img/banner.jpg');
  background-size: cover;
  background-position: center;
  height: 700px;
  width: 100%;
  display: block;
}
.mobile-menu-head,
.mobile-menu-trigger{
	display: none;
}

/*responsive*/
@media(max-width: 991px){
	.gb_index .topper .gbindex-logo{ display:none; height:0;}

	.mega-header .item-center{
		order:3;
		flex:0 0 100%;
	}
	.mega-header .item-left,
	.mega-header .item-right{
		flex:0 0 auto;
	}
	.v-center{
		justify-content: space-between;
	}
	.mega-header .mobile-menu-trigger{
		display: flex;
		height: 30px;
		width: 30px;
		margin-left: 15px;
		cursor: pointer;
		align-items: center;
		justify-content: center;
	}
	.mega-header .mobile-menu-trigger span{
		display: block;
		height: 2px;
		background-color: #333333;
		width: 24px;
		position: relative;
	}
	.mega-header .mobile-menu-trigger span:before,
	.mega-header .mobile-menu-trigger span:after{
		content: '';
		position: absolute;
		left:0;
		width: 100%;
		height: 100%;
		background-color: #333333;
	}
	.mega-header .mobile-menu-trigger span:before{
		top:-6px;
	}
	.mega-header .mobile-menu-trigger span:after{
		top:6px;
	}

	.mega-header .item-right{
		align-items: center;
	}

	.mega-header .menu{
		position: fixed;
		width: 320px;
		background-color:#ffffff;
		left:0;
		top:0;
		height: 100%;
		overflow: hidden;
		transform: translate(-100%);
		transition: all 0.5s ease;
		z-index: 1099;
	}
	.mega-header .menu.active{
	   transform: translate(0%);	
	}
	.mega-header .menu > ul > li{
		line-height: 1;
		margin:0;
		display: block;
	}
	.mega-header .menu > ul > li > a{
		line-height: 50px;
		height: 50px;
		padding:0 50px 0 15px;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.mega-header .menu > ul > li > a i{
		position: absolute;
		height: 50px;
		width: 50px;
		top:0;
		right: 0;
		text-align: center;
		line-height: 50px;
		transform: rotate(-90deg);
	}
	.mega-header .menu .mobile-menu-head{
		display: flex;
		height: 50px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 501;
		position: sticky;
		background-color: #ffffff;
		top:0;
	}
	.mega-header .menu .mobile-menu-head .go-back{
		height: 50px;
		width: 50px;
		border-right: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:#000000;
		font-size: 18px;
		display: none;
		
	}
	.mega-header .menu .mobile-menu-head .go-back i{
		font-size: 18px;
		font-weight:600;
	}
	
	.mega-header .menu .mobile-menu-head.active .go-back{
		display: block;
	}
	.mega-header .menu .mobile-menu-head .current-menu-title{
		font-size: 15px;
		font-weight: 500;
		color:#000000;
	}
	.mega-header .menu .mobile-menu-head .mobile-menu-close{
	    height: 50px;
		width: 50px;
		border-left: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:#000000;	
		font-size: 25px;
	}
	.mega-header .menu .menu-main{
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.mega-header .menu > ul > li .sub-menu.mega-menu,
	.mega-header .menu > ul > li .sub-menu{
		visibility: visible;
		opacity: 1;
		position: absolute;
		box-shadow: none;
		margin:0;
		padding:15px;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		padding-top: 65px;
		max-width: none;
		min-width: auto;
		display: none;
		transform: translateX(0%);
		overflow-y: auto;
	}
.mega-header .menu > ul > li .sub-menu.active{
	display: block;
}

@keyframes slideLeft{
	0%{
		opacity:0;
		transform: translateX(100%);
	}
	100%{
	    opacity:1;
		transform: translateX(0%);	
	}
}
@keyframes slideRight{
	0%{
		opacity:1;
		transform: translateX(0%);
	}
	100%{
	    opacity:0;
		transform: translateX(100%);	
	}
}
	.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
		margin-top:0;
	}
	.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
		margin-bottom: 20px;
	}
	.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center:last-child .title{
		margin-bottom:0px;
	}
	.mega-header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
		flex: 0 0 100%;
        padding: 0px;
	}
	.mega-header .menu > ul > li .sub-menu > ul > li > a,
	.mega-header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
		display: block;
		
	}
	.mega-header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
		margin-bottom: 15px;
	}
	.menu-overlay{
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 1098;
		visibility: hidden;
		opacity:0;
		transition: all 0.5s ease;
	}
	.menu-overlay.active{
	  visibility: visible;
	  opacity:1;	
	}
}

.menu-item-has-children .edu span{
	display:inline-block;
	padding:0 10px;
	height:40px;
	background:#9d9d9d;
	line-height:40px;
	color:#ffffff;
	vertical-align:middle;
}
.menu-item-has-children .edu span i{
	color:#ffffff;
}
@media(max-width: 991px){
	.menu-item-has-children .edu span i{
	color:#333;
}
	}
.menu-item-has-children .edu:hover span{
	background:#06C;
}
.header-top .dropdown-menu { z-index:999999 !important;}
/*
.header-top .dropdown{ line-height:45px;}
*/
.header-top .btn-default {background:none !important; border:none; color:white;}
.header-top .btn-default.dropdown-toggle{ color:#FF9 !important;}


header .peta-search {
    position: relative;
}

.peta-cart .dropdown .dropdown-menu,
.dropdown > .dropdown-menu{
	left: auto;
	right:0;
	position:absolute;
	transform: translate3d(0,50px,0);
    -moz-transform: translate3d(0,50px,0);
    -webkit-transform: translate3d(0,50px,0);
    -ms-transform: translate3d(0,50px,0);
    -o-transform: translate3d(0,50px,0);
    display: block !important;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    transition: transform 0.9s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -moz-transition: -moz-transform 0.9s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -webkit-transition: -webkit-transform 0.9s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -ms-transition: -ms-transform 0.9s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -o-transition: -o-transform 0.9s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
}


.peta-cart .open.dropdown .dropdown-menu,
.open.dropdown > .dropdown-menu{
	opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible;
    transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
}

.peta-cart .open.dropdown .dropdown-menu{
	border-radius: 3px;
	padding:15px 10px!important;
}
.top-links .dropdown > .dropdown-menu > li > a {
    padding: 7px 10px 7px 10px;
    border-bottom: 1px solid #e3e3e3;
}
.peta_top_right .top-links .dropdown > .dropdown-menu > li:last-child > a {
    border-bottom:0;
}
.peta-search button,
.peta-cart button {
    border: none;
    background: none;
    outline: none;
	padding:0;
}
.index .peta-search button.dark i{
	color:#FFF;
}
.index .fixed-position .peta-search button.dark i{
	color:#333;
}
.search-form{
	position: relative;
	margin-top:15px;
}
.search-form label span{
	display:none;
}
.search-form label{
	width:100%;
}
.search-form input.search-field {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #ebebeb;
    border-radius: 7px
}
.peta-search .dropdown-menu{
	max-width: 320px;
    width: 300px;
	background: none;
    border: none;
    box-shadow: none;
}
.peta-cart .cart-info{
	display:none;
}
.search-form  .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    padding: 12px;
    background: none;
    border-radius: 10px;
}
button.search-submit:before {
    content: "\f002";
    font: normal normal normal 14px/1 FontAwesome;
}
button.search-submit span{
	display:none;
}
.search-form .search-submit:hover {
  color: #fff;
}
.peta-cart button i{
	font-size: 25px;
	color: #000;
}
 .peta_icon button.dropdown-toggle,
 .peta_top_right button.dropdown-toggle{
	padding: 0 12px;
}

 .peta_top_right >div:first-child button.dropdown-toggle,
 .peta_icon >div:first-child button.dropdown-toggle{
	padding-right: 0;
}
.peta-cart .dropdown .dropdown-menu{
	max-height: 400px;
    overflow-y: auto;
}
.peta-cart ul{
	list-style:none;
	padding:0;
	float:left;
	width:100%;
	margin:0;
}
.peta-cart .widget_shopping_cart_content{
	position:relative;
	top:-5px;
	z-index:9;
    text-align: center;
    line-height: 12px;
}
.peta-cart .cart-num{
	border-width: 1px;
	border-style:solid;
    background: red;
    min-width: 15px;
    height: 15px;
	line-height:12px;
    border-radius: 50%;
	font-size:10px;
	color:#fff;
    text-align: center;
	display: inline-block;
}
 .peta-cart .cart-num{
	position: absolute;
    bottom: 0;
    right: -5px;
}

.peta-cart .dropdown-menu{
	margin-top: 10px;
	background: #fff;
    border: 1px solid #ebebeb;
	padding: 10px;
	color: #8f8f8f;
	width:300px;
}
.site-header .peta-cart .image {
    float: left;
    overflow: hidden;
    margin: 0 10px 0 0;
}
.site-header .minicart_pro_des{
	float: left;
    overflow: hidden;
	width: 170px;
    margin: 0 10px 0 0;
	text-align:left;
}
.site-header .peta-cart .remove{
	float: right;
    border: 1px solid;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    overflow: hidden;
    line-height: 12px;
    text-align: center;
}

.site-header .peta-cart .remove:hover{
	color:inherit!important;
	background:none;
}

.mini_cart_item{
	float:left;
	width:100%;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
	padding:15px 0;
	border-bottom:1px solid #ebebeb;
}
.mini_cart_item .image a{
	border: 1px solid #fff;
	display:block;
}
.minicart_pro_des a{
    font-size: 14px;
    line-height: 1.2;
	text-decoration:none;
	color:#444;
}
.minicart_pro_des span.quantity{
	padding-top:5px;
	display:block;
}
.peta-cart .widget_shopping_cart_content .total {
    float: left;
	text-align:left;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #ebebeb;
}
.peta-cart .widget_shopping_cart_content .total strong{
	font-size:20px;
}
.peta-cart .widget_shopping_cart_content .total .amount{
	float:right;
	font-size:20px;
}
.peta-cart .widget_shopping_cart_content .total .amount span{
	font-size:20px;
}
.peta-cart  .buttons{
	float:left;
	width:100%;
	margin-bottom:0;
}
.peta-cart  .buttons a{
	width: 40%;
    float: left;
    text-align: center;
    color:#fff;
    padding: 10px 0;
	border:1px solid #fff;
}
.peta-cart  .buttons a.checkout{
	float:right;
}
.peta-cart  .buttons a:hover,
.peta-cart  .buttons a:focus{
	background:#fff;
	text-decoration:none;

}
.header-icon button.dropdown-toggle{
	border:none;
	background:none;
	padding: 0;
}

 .btn-default:active:hover,
 .btn-default.active:hover,
 .open > .dropdown-toggle.btn-default:hover,
 .btn-default:active:focus,
 .btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
 .btn-default:active.focus,
 .btn-default.active.focus,
 .open > .dropdown-toggle.btn-default.focus{
	background:none;
	border:none;
	outline:none;
	box-shadow:none;
}

.dropdown span.title{
	z-index: -1;
    position: absolute;
    display:none;
}

/*------------------------------------------------------------------
 Project:	btn-hover change text
 
 -------------------------------------------------------------------*/
  
 @media all and (min-width: 992px){
	  .menu-hover span.on, .fixedheader .menu-hover span.on{
		 color:#000;
		 font-weight:600;
	 }
	 .index .menu-hover span.on{
		 color:#FFF;
	 }
	
 .btn-hover{
	 position:relative ;
	 display:inline-block;
	 -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
	
	
 }

 .btn-hover .on{
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
	
}
.btn-hover:before {
    content: '';
    position: absolute;
    
    top:18%;
	left:-1em;
	
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: .4s,opacity .6s;
    -moz-transition: .4s,opacity .6s;
    -o-transition: .4s,opacity .6s;
    transition: .4s,opacity .6s;
	color:#333;
	font-weight:600;
}

 .index .btn-hover:before{
	 color:#FFF;
 }
.index .fixedheader .btn-hover:before{
	top:55%;
	left:-0.5em;
	margin-top:-1em;
	color:#333;
}
.index .fixedheader .menu .btn-hover:before {
   
	top:55%;
	left:-0.5em;
	margin-top:-1em;

}
.no-index .btn-hover:before{
	top:55%;
	left:-1.5em;
	margin-top:-1.85em;
	text-transform:uppercase;
	letter-spacing:-1px;
}
.btn-hover:before {
    content: attr(data-hover);
    -webkit-transform: translate(-150%,0);
    -moz-transform: translate(-150%,0);
    -ms-transform: translate(-150%,0);
    -o-transform: translate(-150%,0);
    transform: translate(-150%,0);
}
.btn-hover:hover .on {
    opacity: 0 ;
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
}

.btn-hover:hover:before, .menu.btn-hover:hover:before
          {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}

 }
 @media all and (max-width: 991px){
 .menu-hover span.on{
	 color:#FFF;
 }
  }
 .main-navigation  .nav-menu .flex-lan{
	 position:relative;
 }
 .main-navigation  .nav-menu .flex-lan span.ko-menu{
	 position:absolute;
	 right:0;
	 display:inline-block;
	 text-align:right;
 }
 .main-navigation  .nav-menu small{
	 
	color:#999;
	margin-left:0.6em;
	font-size:0.94em;
	font-weight:600;
}
.main-navigation  .nav-menu small i{
	color:#999;
}
/*
.main-navigation  .nav-menu small:before{
	content:'';
	display:inline-block;
	width:3px;
	height:3px;
	
	background:#999;
	vertical-align:baseline;
	margin-right:0.6em;
}*/
@media all and (min-width: 992px){
	.main-navigation  .nav-menu small, .main-navigation  .nav-menu small i{
		color:#9e9e9e;
		margin-right:0.3em;
	}
	/*
	.main-navigation  .nav-menu small:before{
		background:#9e9e9e;
	}
	*/
}
</style>
<div class="mega-master">
<div class="topper" style="" >
   <div class="header-top sig-back2">
     <div class="container" style="max-width:1300px !important;">
		<div class="row ">
        
       
         
          <div class=" col-sm-3  col-xs-6 sig-back textaligncenter no-padding top-height " >
     <b class="hidden-xs"  style="color:#ffffff;">TEL&nbsp; &nbsp02 761 1016</b>
          <!--
           <div class="global-href">
           
             <span><a href="http://kpma21.com/bbs/board.php?bo_table=english&wr_id=1">ENGLISH</a></span><span><a href="http://kpma21.com/bbs/board.php?bo_table=japanese&wr_id=1">日本語</a></span>
            
           </div>
         -->
           <!--
            <div class="social-login-options">
              <div class="social">
                <a class="icon-ko" href="#" target="_blank"></a>
              </div>
              <div class="social">
                <a class="icon-us" href="#" target="_blank"></a>
              </div>
              <div class="social"> 
                <a class="icon-cn" href="#" target="_blank"></a>
              </div>
              <div class="social"> 
                <a class="icon-th" href="#" target="_blank"></a>
              </div>
              <div class="social">
               <a class="icon-vn" href="#" target="_blank"></a>
               </div>
            </div>
            -->
          </div>
          <div class=" col-sm-9  col-xs-6 peta_top_right textalignright no-padding top-height">
            <div class="top-links ht-height">
		      <div class="dropdown">
                <span class="title">Account</span>
			    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"><i class="fa fa-user-o" aria-hidden="true"></i>&nbsp;&nbsp;MEMBER&nbsp;&nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
			    </button>
				<ul class="dropdown-menu">
                                    <li class="first">
                    <a href="http://kpma21.com/bbs/login.php" title="Login">LOGIN</a>
                  </li>
				  <li class="last">
					<a href="http://kpma21.com/bbs/register.php" title="Join">JOIN</a>
				  </li>
                  				</ul>
              </div>
            </div>
          </div>
          
         
          
        </div><!--//row-->
      </div><!--//top-bar-container-->
  </div>
  <div class="gbindex-logo">
  <a href="#"><img style="width:22em; height:auto;" src="http://kpma21.com/theme/bootstrap_kpmat/img/full-logo.png" alt="sfv03" /></a>
  </div>
</div>
<!-- header start -->
 <header class="mega-header">
 	<div class="container">
 		<div class="mega-row v-center">
 			<div class="header-item item-left">
 				<div class="logo wow">
 					<a href="#"><img style="width:6em; height:auto;" src="http://kpma21.com/theme/bootstrap_kpmat/img/custom-logo.png" alt="sfv03" /></a>
 				</div>
 			</div>
 			<!-- menu start here -->
 			<div class="header-item item-center">
 				<div class="menu-overlay">
 				</div>
 				<nav class="menu">
 					<div class="mobile-menu-head">
 						<div class="go-back"><i class="fa fa-angle-left"></i></div>
 						<div class="current-menu-title"></div>
 						<div class="mobile-menu-close">&times;</div>
 					</div>
 					<ul class="menu-main">
 						<li>
 							<a href="http://kpma21.com">HOME</a>
 						</li>
 						<li class="menu-item-has-children">
 							<a href="#">본회소개<i class="fa fa-angle-down"></i></a>
 							<div class="sub-menu single-column-menu">
 								<ul>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=greeting">인사말</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=purpose">KPMA</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=tree&wr_id=1">조직도</a></li>
                                    <li><a href="http://kpma21.com/bbs/board.php?bo_table=history">본회연혁</a></li>
                                    <li><a href="http://kpma21.com/bbs/board.php?bo_table=law">정관및규정</a></li>
                                    <li><a href="http://kpma21.com/bbs/board.php?bo_table=executive">임직원프로필</a></li>
                                    <li><a class="gr-menu" href="http://kpma21.com/bbs/board.php?bo_table=branches">지회소개</a></li>
                                    <li><a href="http://kpma21.com/bbs/board.php?bo_table=contact&wr_id=1">오시는길</a></li>
 								</ul>
 							</div>
 						</li>
 						<li class="menu-item-has-children">
 							<a href="#">행사내용 <i class="fa fa-angle-down"></i></a>
 							<div class="sub-menu single-column-menu">
 								<ul>
 									<li> <a href="http://kpma21.com/bbs/board.php?bo_table=event_schedule">행사일정</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=hq_event">본회행사</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=branch_event">지회행사</a></li>
 									<li> <a href="http://kpma21.com/bbs/board.php?bo_table=event_promotion">공연홍보</a></li>
 								</ul>
 							</div>
 						</li>
                        <li class="menu-item-has-children">
 							<a href="#">정보마당 <i class="fa fa-angle-down"></i></a>
 							<div class="sub-menu single-column-menu">
 								<ul>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=member_info">정회원</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=new_release">음반소개</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=r_festival">전국축제현황</a></li>
                                    <li><a href="http://kpma21.com/bbs/board.php?bo_table=song_fest">전국가요제현황</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=form">소정양식</a></li>
                                    
 								</ul>
 							</div>
 						</li>
                        <li class="menu-item-has-children">
 							<a href="#">커뮤니티<i class="fa fa-angle-down"></i></a>
 							<div class="sub-menu single-column-menu">
 								<ul>
 									<li> <a href="http://kpma21.com/bbs/board.php?bo_table=notice">공지사항</a></li>
 									<li><a href="http://kpma21.com/bbs/board.php?bo_table=press">언론보도</a></li>
 									<li>  <a href="http://kpma21.com/bbs/board.php?bo_table=movie">미디어</a></li>
                                     								</ul>
 							</div>
 						</li>
                        
 						<li class="menu-item-has-children">
 							<a href="#" class="edu "><span class="sig-back">부설교육원 <i class="fa fa-angle-down"></i></span></a>
 							<div class="sub-menu mega-menu mega-menu-column-4">
                               <div class="list-item">
                               	  <h4 class="title">교육원소개</h4>
                               	  <ul>
                               	  	 <li><a href="http://kpma21.com/bbs/board.php?bo_table=summary">교육목적</a></li>
                               	  	 <li><a href="http://kpma21.com/bbs/board.php?bo_table=professor">강사진</a></li>
                                     <!--
                               	  	 <li><a href="#">수료생소개</a></li>
                                     -->
                               	  	 <li><a href="http://kpma21.com/bbs/board.php?bo_table=contact&wr_id=1">오시는길</a></li>
                               	  	 
                               	  </ul>
                               	 
                               </div>
                               <div class="list-item">
                               	<h4 class="title">교육과정</h4>
                               	<ul>
                                <li> <a href="http://kpma21.com/bbs/board.php?bo_table=certificate">민간자격등록증</a></li>
                               	  	  <li> <a href="http://kpma21.com/bbs/board.php?bo_table=curri">커리큘럼</a></li>
                               	  	 
                               	  </ul>
                               	  
                               </div>
                               <div class="list-item">
                               	<h4 class="title">자격증</h4>
                               	<ul>
                               	  	 <li><a href="http://kpma21.com/bbs/board.php?bo_table=guideline">응시요강</a></li>
                               	  	 <li><a href="http://kpma21.com/bbs/board.php?bo_table=judge">심사위원</a></li>
                               	  	 <li><a href="#">자주묻는질문</a></li>
                               	  	 
                               	  </ul>
                               </div>
                               <div class="list-item">
                               	 <img src="http://kpma21.com/theme/bootstrap_kpmat/img/mega_img01.jpg" alt="mega_img01">
                               </div>
 							</div>
 						</li>
 						
 						
 					</ul>
 				</nav>
 			</div>
 			<!-- menu end here -->
 			<div class="header-item item-right">
            <!--
 				<a href="#"><i class="fa fa-search"></i></a>
 				<a href="#"><i class="fa fa-facebook"></i></a>
 				<a href="#"><i class="fa fa-instagram"></i></a>
                -->
 				<!-- mobile menu trigger -->
 				<div class="mobile-menu-trigger">
 					<span></span>
 				</div>
 			</div>
 		</div>
 	</div>
 </header>
 <!-- header end -->
 </div><!--//megamaster-->
 <script>

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
	var calScreenWidth = jQuery(window).width();
var topperH = jQuery(".topper").height();

   jQuery('.topper').css('height',topperH + 'px');
    if (scroll >= topperH ) {
       $(".topper").addClass("fix-topper");
        $(".mega-header").addClass("fixedheader");
		//$(".logo").addClass("wow bounceInDown ");
     } else {
		  $(".topper").removeClass("fix-topper");
        $(".mega-header").removeClass("fixedheader");
		//$(".logo").removeClass("wow bounceInDown ");
    }
	 jQuery(window).resize(function(){
		 var scroll = $(window).scrollTop();
        var calScreenWidth = jQuery(window).width();
    	var topperH = jQuery(".topper").height();

   jQuery('.topper').css('height',topperH + 'px');
    if (scroll >= topperH ) {
       $(".topper").addClass("fix-topper");
        $(".mega-header").addClass("fixedheader");
		//$(".logo").addClass("wow bounceInDown ");
     } else {
		  $(".topper").removeClass("fix-topper");
        $(".mega-header").removeClass("fixedheader");
		//$(".logo").removeClass("wow bounceInDown ");
    }
		

    });
	
}); 
</script>

<script>

 const menuga = document.querySelector(".menu");
 const menuMain = menuga.querySelector(".menu-main");
 const goBack = menuga.querySelector(".go-back");
 const menuTrigger = document.querySelector(".mobile-menu-trigger");
 const closeMenu = menuga.querySelector(".mobile-menu-close");
 let subMenu;
 menuMain.addEventListener("click", (e) =>{
 	if(!menuga.classList.contains("active")){
 		return;
 	}
   if(e.target.closest(".menu-item-has-children")){
   	 const hasChildren = e.target.closest(".menu-item-has-children");
      showSubMenu(hasChildren);
   }
 });
 goBack.addEventListener("click",() =>{
 	 hideSubMenu();
 })
 menuTrigger.addEventListener("click",() =>{
 	 toggleMenu();
 })
 closeMenu.addEventListener("click",() =>{
 	 toggleMenu();
 })
 document.querySelector(".menu-overlay").addEventListener("click",() =>{
 	toggleMenu();
 })
 function toggleMenu(){
 	menuga.classList.toggle("active");
 	document.querySelector(".menu-overlay").classList.toggle("active");
 }
 function showSubMenu(hasChildren){
    subMenu = hasChildren.querySelector(".sub-menu");
    subMenu.classList.add("active");
    subMenu.style.animation = "slideLeft 0.5s ease forwards";
    const menuTitle = hasChildren.querySelector("i").parentNode.childNodes[0].textContent;
    menuga.querySelector(".current-menu-title").innerHTML=menuTitle;
    menuga.querySelector(".mobile-menu-head").classList.add("active");
 }

 function  hideSubMenu(){  
    subMenu.style.animation = "slideRight 0.5s ease forwards";
    setTimeout(() =>{
       subMenu.classList.remove("active");	
    },300); 
    menuga.querySelector(".current-menu-title").innerHTML="";
    menuga.querySelector(".mobile-menu-head").classList.remove("active");
 }
 
 window.onresize = function(){
 	if(this.innerWidth >991){
 		if(menuga.classList.contains("active")){
 			toggleMenu();
 		}

 	}
 }




</script>
<!--FOLK.JS의 PRODUCT SLIDER와 충돌 -->
<!-- plugin.js의 rTabs와 domain.js의 rtabs와 병행사용--><script>
jQuery(document).ready(function(){
	var windowH = jQuery(window).height();	
var aheight = windowH - $('.aca-head').height();

$('.aca-inner').css('height',aheight + 'px');	
 $('#head-slider li').height($('.headBox-wrap').height());

jQuery(window).resize(function(){
var windowH = jQuery(window).height();	
var aheight = windowH - $('.aca-head').height();

$('.aca-inner').css('height',aheight + 'px');
 $('#head-slider li').height($('.headBox-wrap').height());
});
});
</script>
<style>
 @media all and (max-width: 991px){
	 .row{
		 margin:0 !important;
	 }
 }
</style>
 
   
   <div class="aca-inner" >
      <div id="headBox-wrap" class="headBox-wrap no-margin" >
      
           <div class="date-nav">
          <a href="javascript:void(0);" id="goToPrev" class="isPrev"><i class="fa fa-chevron-left" aria-hidden="true"></i></a><a href="javascript:void(0);" id="goToNext" class="isNext"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
           </div>
        <ul id="head-slider" class="head-slider" >
         <li class="s-one" >
          <div class="sl-bg size-cover" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/aca-bg07.jpg); " >
          <div class="mosaic-layer" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/mosaic.png); background-size:3px; background-repeat:repeat; width:100%; height:100%;">
           <div class="container" style="height:100%;">
             <div class="row" style="height:100%;">
               <div class="row-height row-xs-height" style="height:100%;">
               <div class="col-sm-2 col-sm-height col-sm-middle hidden-xs">
                </div>
                
                
                <div class="col-sm-5 col-sm-height col-sm-middle col-xs-height col-xs-middle main-link textalignleft">
                <img style="width:80%; max-width:280px; height:auto; margin-top:50px;"" src="http://kpma21.com/theme/bootstrap_kpmat/img/custom-logo-w.png" alt="gb-logo" /><br />
                 <!--
                 <h2>01</h2>
                 -->
                
                
                 <h1 style="font-family: SCDream7, sans-serif; margin-top:50px;" >한국대중음악인연합회</h1>
                 <h5 class="SCDream3" style=" margin-top:1em;">대중음악의 발전과 대중음악인의 권익 보호를 위해 설립되었습니다 </h5>
                 <!--
                 <a href="" class="arrow-btn ani4"><span class="spl">BUY NOW</span><span class="spr"><b uk-icon="icon: arrow-right"></b></span></a> -->
                
                 
                </div>
                <div class="col-sm-3 col-sm-height col-sm-middle hidden-xs">
                </div>
                <div class="col-sm-2 col-sm-height col-sm-middle hidden-xs">
                </div>
               </div>
             </div>
             
            
             
           </div>
           </div><!--//mosaic layer-->
          </div>
         </li>
          <li class="s-two" >
           <div class="sl-bg size-cover" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/aca-bg10.jpg); " >
            <div class="container" style="height:100%;">
             <div class="row" style="height:100%;">
               <div class="row-height " style="height:100%;">
               <div class="col-sm-2 col-sm-height col-sm-middle hidden-xs">
                </div>
                
                
                <div class="col-sm-5 col-sm-height col-sm-middle col-xs-height col-xs-middle main-link">
                 <img style="width:80%; max-width:280px; height:auto; margin-top:50px;"" src="http://kpma21.com/theme/bootstrap_kpmat/img/custom-logo-w.png" alt="gb-logo" /><br />
                <!--
                 <h2>02</h2>
                 -->
                
                 <h1 style="font-family: SCDream7, sans-serif; margin-top:50px;" >한국대중음악인연합회 교육원</h1>
                 <h5 class="SCDream3" style=" margin-top:1em;">문화체육관광부 인증 대중음악 지도자 양성 대표기관</h5>
                 <!--
                 <a href="" class="arrow-btn ani4"><span class="spl">BUY NOW</span><span class="spr"><b uk-icon="icon: arrow-right"></b></span></a> -->
               
                </div>
                <div class="col-sm-3 col-sm-height col-sm-middle hidden-xs">
                </div>
                <div class="col-sm-2 col-sm-height col-sm-middle hidden-xs">
                </div>
               </div>
             </div>
             
              
             
           </div>
          </div>
         </li>
         <li class="s-three">
          <div class="sl-bg size-cover" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/aca-bg13.jpg); ">
          <div class="mosaic-layer" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/mosaic.png); background-size:3px; background-repeat:repeat; width:100%; height:100%;">
           <div class="container" style="height:100%;">
             <div class="row" style="height:100%;">
               <div class="row-height" style="height:100%;">
               <div class="col-sm-2 col-sm-height col-sm-middle hidden-xs">
                </div>
                
                
                <div class="col-sm-5 col-sm-height col-sm-middle col-xs-height col-xs-middle main-link">
                 <img style="width:80%; max-width:280px; height:auto; margin-top:50px;"" src="http://kpma21.com/theme/bootstrap_kpmat/img/custom-logo-w.png" alt="gb-logo" /><br />
                <!--
                 <h2>02</h2>
                 -->
                
                 <h1 style="font-family: SCDream7, sans-serif; margin-top:50px;" >KPMA 음악인 지역사회 봉사단</h1>
                 <h5 class="SCDream3" style=" margin-top:1em;">사회공익을 중심으로 나눔을 실천하며 밝고 건강한 사회를 만들어 갑니다</h5>
                 <!--
                 <a href="" class="arrow-btn ani4"><span class="spl">BUY NOW</span><span class="spr"><b uk-icon="icon: arrow-right"></b></span></a> -->
                </div>
                <div class="col-sm-3 col-sm-height col-sm-middle hidden-xs">
                </div>
                <div class="col-sm-2 col-sm-height col-sm-middle hidden-xs">
                </div>
                
               </div>
             </div>
             
             
           </div>
           </div>
          </div>
         </li>
        
        
        </ul>
          
            <div class="moji-nav mob-hidden">
           <span class="moji-con moji1">01</span><span class="moji-con moji2">02</span><span class="moji-con moji3">03</span>
           </div>
           <div class="nav-after mob-hidden"></div>
           
      </div>
      <!--
      <a href="#start" data-easing="easeInOutQuint" data-scroll="" data-speed="600" data-url="false" class="scroll-down-button "></a>
      -->
   </div>
 <div class="space" style="padding:3em 0">
  </div>
  
  <div class="lat-feed" >
    <div class="container">
      <div class="row">
        <div class="col-sm-4 sticky_sider xs-padding ls-bar">
          <div class="sig-back uk-wrap">
           <span uk-icon="icon: bell; ratio: 1.3" class="uk-icon"></span>
          </div>
           <h4 class="SCDream5">NOTICE</h4>
          <!--
         
          <table>
           <tr>
           <td class="date"><b class="SCDream4 sig-color">12 06 DEC</b></td>
           <td><a href="">사)한국대중음악인연합회 경남 창원동부지회 창립식</a>
           
           </td>
           </tr>
           <tr>
           <td class="date"><b class="SCDream4 sig-color">12 06 DEC</b></td>
           <td><a href="">사)한국대중음악인연합회 경남 창원동부지회 창립식</a></td>
           </tr>
          
          </table>
         -->
          
          <table>
                     <tr>
           <td class="date"><b class="SCDream4 sig-color"> Apr 18 24</b></td>
           <td><a href="http://kpma21.com/bbs/board.php?bo_table=notice&amp;wr_id=53">사)한국대중음악인연합회 충북 중부지회 창립식 및 강은석지회장 취임식</a></td>
           </tr>
                                <tr>
           <td class="date"><b class="SCDream4 sig-color"> Apr 15 24</b></td>
           <td><a href="http://kpma21.com/bbs/board.php?bo_table=notice&amp;wr_id=52">사)한국대중음악인연합회 충북 중부지회 창립식 공지 안내</a></td>
           </tr>
                                <tr>
           <td class="date"><b class="SCDream4 sig-color"> Apr 03 24</b></td>
           <td><a href="http://kpma21.com/bbs/board.php?bo_table=notice&amp;wr_id=51">사)한국대중음악인연합회 전국회원대회 및 워크숍</a></td>
           </tr>
                      
          
          
          </table>         <div class="space" style="padding:1em 0">
  </div>
          <div class="sig-back uk-wrap">
          <span uk-icon="icon: calendar; ratio: 1.3"  class="uk-icon"></span>
          </div>
          <h4 class="SCDream5">SCHEDULE</h4>
          <!--
          
          <table>
           <tr>
           <td class="date"><b class="SCDream4 sig-color">12 06 DEC</b></td>
           <td><a href="">사)한국대중음악인연합회 경남 창원동부지회 창립식</a></td>
           </tr>
           <tr>
           <td class="date"><b class="SCDream4 sig-color">12 06 DEC</b></td>
           <td><a href="">사)한국대중음악인연합회 경남 창원동부지회 창립식</a></td>
           </tr>
          
          </table>
          -->
          
          <table>
                     <tr>
           <td class="date"><b class="SCDream4 sig-color"> Apr 15 24</b></td>
           <td><a href="http://kpma21.com/bbs/board.php?bo_table=event_schedule&amp;wr_id=150">사)한국대중음악인연합회 충북 중부지회 창립식 공지 안내</a></td>
           </tr>
                                <tr>
           <td class="date"><b class="SCDream4 sig-color"> Apr 03 24</b></td>
           <td><a href="http://kpma21.com/bbs/board.php?bo_table=event_schedule&amp;wr_id=149">사)한국대중음악인연합회 전국회원대회 및 워크숍</a></td>
           </tr>
                                <tr>
           <td class="date"><b class="SCDream4 sig-color"> Mar 21 24</b></td>
           <td><a href="http://kpma21.com/bbs/board.php?bo_table=event_schedule&amp;wr_id=147">사)한국대중음악인연합회 충청남도 서부지회 창립식</a></td>
           </tr>
                      
          
          
          </table>        </div>
        <div class="col-sm-1 xs-hidden">
        </div>
        <div class="col-sm-7 side-contents xs-padding rs-bar">
        <!--
          <div class="size-cover ev-bg" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/lat.jpg); ">
          </div>
          <div class="ev-con textaligncenter">
           <div class="row no-margin">
             <div class="row-height">
               <div class="col-sm-3 col-sm-height col-sm-middle sig-back textaligncenter" style="min-height:80px; height:100px; color:#ffffff;">
               12 06 DEC
               </div>
               <div class="col-sm-9 col-sm-height col-sm-middle textaligncenter" style="background:#efefef;">
               <a href="">사)한국대중음악인연합회 경남 창원동부지회 창립식</a>
               </div>
             </div>
           </div>
           -->
        <style>
@media only screen and (max-width :991px){
	.lk-date{
		line-height:80px;
	}
	.lk-txt{
		padding:30px 0;
		
	}
}
</style>
<div class="size-cover ev-bg" style="background-image:url(http://kpma21.com/data/file/hq_event/thumb-661855227_Vh7ElTr3_dcfda00152ffa11953108cc4294adefa486768b1_1000x.jpg ">
          </div>
          <div class="ev-con textaligncenter">
           <div class="row no-margin">
             <div class="row-height">
               <div class="col-sm-3 col-sm-height col-sm-middle sig-back textaligncenter lk-date" style="min-height:80px; height:100px; color:#ffffff;">
               Feb 23 24               </div>
               <div class="col-sm-9 col-sm-height col-sm-middle textaligncenter lk-txt" style="background:#efefef;">
               <a href="http://kpma21.com/bbs/board.php?bo_table=hq_event&amp;wr_id=248">2024 사)한국대중음악인연합회 정기총회 및 이사회</a>
               </div>
             </div>
           </div>
          <div class="guide-con">
            <a href="http://kpma21.com/bbs/board.php?bo_table=member_info"><i class="fa fa-id-card-o" aria-hidden="true"></i></a><br />
            <h5 class="SCDream5">정회원</h5>
          </div>
           <div class="guide-con">
            <a href="http://kpma21.com/bbs/board.php?bo_table=form"><i class="fa fa-file-text-o" aria-hidden="true"></i></a><br />
            <h5 class="SCDream5">서식자료</h5>
          </div>
           <div class="guide-con">
            <a href="http://kpma21.com/bbs/board.php?bo_table=branches"><i class="fa fa-sitemap" aria-hidden="true"></i></a><br />
            <h5 class="SCDream5">지회소개</h5>
          </div>
          <div class="guide-con">
            <a href="javascript:alert('콘텐츠 준비중 입니다')"><i class="fa fa-heart-o" aria-hidden="true"></i></a><br />
            <h5 class="SCDream5">사회봉사단</h5>
          </div>
          <!--
           <div class="guide-con">
            <a href=""><i class="fa fa-graduation-cap" aria-hidden="true"></i></a><br />
            <h5 class="SCDream5">부설교육원</h5>
          </div>
          -->
          
         </div>
          
          
        </div>
      </div>
    </div>
  </div>
  

<div class="space" style="padding:2em 0"></div>
<div class="section7 jarallax" style="background-image:url(http://kpma21.com/theme/bootstrap_kpmat/img/aca-bg072.jpg); ">
 <div class="ssv-layer">
   <div class="container">
    <h2 class="roboto" style="color:#ffffff; text-transform:uppercase;">CONSERVATORY</h2>
    <h4 class="SCDream4" style="color:#ccc;">한국대중음악인연합회 부설 교육원</h4>
    <p class="SCDream4" style="color:#f9f9f9; padding-bottom:2.5em;">문화체육관광부 자격증 인증 기관 </p>
    <div class="row">
    
    <div class="col-sm-2 xs-hidden">
    </div>
     <div class="col-sm-2 col-xs-6">
      <div class="pad10 ssvtb">
        
         <a href="http://kpma21.com/bbs/board.php?bo_table=professor"><i class="fa fa-user-o" aria-hidden="true"></i></a><br />
         
          <b class="SCDream5">강사진</b>
         
      </div>
     </div>
     <div class="col-sm-2 col-xs-6">
      <div class="pad10 ssvtb">
       
         <a href="http://kpma21.com/bbs/board.php?bo_table=curri"><i class="fa fa-graduation-cap" aria-hidden="true"></i></a><br />
          
          <b class="SCDream5">교육과정</b>
        
         
      </div>
     </div>
     <div class="col-sm-2 col-xs-6">
      <div class="pad10 ssvtb">
       
          <a href="http://kpma21.com/bbs/board.php?bo_table=guideline"><i class="fa fa-address-card-o" aria-hidden="true"></i></a><br />
          
          <b class="SCDream5">자격증</b>
         
      </div>
     </div>
      <div class="col-sm-2 col-xs-6">
      <div class="pad10 ssvtb">
       
          <a href=""><i class="fa fa-map-marker" aria-hidden="true"></i></a><br />
          
          <b class="SCDream5">오시는길</b>

         
      </div>
     </div>
     
     
    
     
    <div class="col-sm-2 xs-hidden">
    </div>
     
     
     </div>
     
    </div>
    
    <div class="space" style="padding:2em 0"></div>
    <div class="row no-margin">
    <div class="row-height">
     <div class="col-sm-6 col-sm-height col-sm-middle col-xs-6">
      <div class="ssvl ">
        <h5 class="SCDream4 ">교육문의</h5><br />
        <h5 class="SCDream4 ">강사구인문의</h5>
      </div>
     </div>
     <div class="col-sm-6 col-sm-height col-sm-middle col-xs-6">
      <div class="ssvr">
      <div class="call-banner wow fadeInRight"> 
               <span class="picon"><i class="fa fa-phone" aria-hidden="true"></i></span><span class="pnum"><b  style="color:#ffffff;">02.761.1016 </b></span>
             </div>
      </div>
     </div>
    </div>
    </div>
   </div>
 </div>
</div>

  <div class="space" style="padding:5em 1em">
  <div class="container">
   <div class="row">
    <div class="row-height">
    <div class="col-sm-3 col-sm-height col-sm-middle">
    <h1 style="margin:0; line-height:1;">quick link</h1>
    </div>
    <div class="col-sm-1 col-sm-height col-sm-middle">
     
    </div>
    <div class="col-sm-2 col-sm-height col-sm-middle">
     <a class="quick" href="http://kpma21.com/bbs/board.php?bo_table=prupose"><span uk-icon="icon:  gitter"></span>협회소개</a>
    </div>
    <div class="col-sm-2 col-sm-height col-sm-middle">
     <a class="quick" href="http://kpma21.com/bbs/board.php?bo_table=hq_event"><span uk-icon="icon:  video-camera"></span>행사내용</a>
    </div>
    <div class="col-sm-2 col-sm-height col-sm-middle">
     <a class="quick" href="http://kpma21.com/bbs/board.php?bo_table=notice"><span uk-icon="icon:  users"></span>커뮤니티</a>
    </div>
    <div class="col-sm-2 col-sm-height col-sm-middle">
     <a class="quick" href="javascript:alert('콘텐츠 준비중 입니다')"><span uk-icon="icon:   heart"></span>사회봉사단</a>
    </div>
    
    
    </div>
   </div>
  </div>
  </div>
<script>


    $(".lyn-btn").on('click', function(){
        var value = $(this).attr('data-filter');
        
        if(value == "all")
        {
            //$('.filter').removeClass('hidden');
            $('.filter').show('3000');
        }
        else
        {
//            $('.filter[filter-item="'+value+'"]').removeClass('hidden');
//            $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
            $(".filter").not('.'+value).hide('3000');
            $('.filter').filter('.'+value).show('3000');
            
        }
    
    
  
 $(".lyn-btn").removeClass('act');
$(this).addClass('act');

});

</script> 
 
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $(".menu-item a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script> 


<div id="bottom" class="bottom " >
 <div class="hc-inner" style="max-width:1300px; margin:0 auto;">

  <div class="row">
   <div class="row-height">
   
    <div class="col-sm-3 col-sm-height col-sm-middle sig-back" style="text-align:left;" >
    
   <div style="padding:0 1em;">
    <img class="bot-logo" src="http://kpma21.com/theme/bootstrap_kpmat/img/custom-logo-w.png" style="margin-top:2em;" alt="bot-logo02.png" />
      
   <div class="center-shoe" style="color:#e5e5e5;">
   <span class="addr"><b class="SCDream4" style="color:#ffffff;">한국대중음악인연합회</b> 
   </span><br />
  서울특별시 강서구 양천로583  우림블루비즈니스센터 A동 2211호<br />
  
   
   <b class="SCDream4" style="color:#ffffff;">TEL</b>&nbsp;02 761 1016&nbsp;&nbsp;<b class="SCDream4" style="color:#ffffff;">FAX</b>&nbsp; 02 714 6046&nbsp;&nbsp;<br />
   
      
      </div>
      
      </div>
      
    
    </div>
    <div class="col-sm-9 col-sm-height col-sm-middle center-shoe">
        <a class="sns-icn up-bounce" href="https://www.instagram.com/grigobio_mat/" target="_blank";><span uk-icon="icon: instagram"></span></a>
    <a class="sns-icn up-bounce" href="javascript:alert('콘텐츠 준비중 입니다')" target="_blank";><span uk-icon="icon: facebook"></span></a>
    
    <a class="sns-icn up-bounce" href="javascript:alert('콘텐츠 준비중 입니다')" target="_blank";><span uk-icon="icon: twitter"></span></a>
     <a class="sns-icn up-bounce" href="http://kpma21.com/bbs/board.php?bo_table=contact&wr_id=1" ><span uk-icon="icon: location"></span></a>
    <div class="bot-link">
    <a href="http://kpma21.com/bbs/register.php" title="Join"><small>JOIN US</small></a>
       <a href="http://kpma21.com/bbs/login.php" title="Login"><small>LOGIN</small></a> 
     
    
    <a href="http://kpma21.com/bbs/board.php?bo_table=greeting"><small>ABOUT US</small></a> 
    <a href="http://kpma21.com/bbs/hp_privacy.php" title="Join"><small>PRIVACY</small></a>
   </div>
    
    </div>
   
    </div><!--//row-height-->
   </div><!--//row-->
  
   </div><!--//container-->
</div>
<div class="shoe sig-back2" style="background:#aaa7aa;" >
    <small style="color:#ffffff !important;">
      copyright @ 2024 by KPMA All rights reserved.<strong></strong>
    </small>&nbsp;&nbsp;&nbsp;
    
  </div>
 

<!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded js-scroll-trigger" href="#page-top" data-easing="easeInOutQuint" data-scroll="" data-speed="600" data-url="false">
      <i class="fa fa-angle-up"></i>
    </a>
<style>
#hd_pop{
	
}
.hd_pops{
	position:relative !important;
	top:0 !important;
	left:0 !important;
	background:rgba(255,255,255,.5) !important;
	padding:1em 1.5em !important;
	border:none !important;
}
.hd_pops_con p {
	
	color:#444 !important;
	text-align:left;
}
.hd_pops_footer{
	background:none !important;
}
</style>
<!-- 팝업레이어 시작 { -->



<span class="sound_only">팝업레이어 알림이 없습니다.</span>
<script>
$(function() {
    $(".hd_pops_reject").click(function() {
        var id = $(this).attr('class').split(' ');
        var ck_name = id[1];
        var exp_time = parseInt(id[2]);
        $("#"+id[1]).css("display", "none");
        set_cookie(ck_name, 1, exp_time, g5_cookie_domain);
    });
    $('.hd_pops_close').click(function() {
        var idb = $(this).attr('class').split(' ');
        $('#'+idb[1]).css('display','none');
    });
    $("#hd").css("z-index", 1000);
});
</script>
<!-- } 팝업레이어 끝 -->    

      
  

<!-- } 하단 끝 -->

<script>
$(function() {
    // 폰트 리사이즈 쿠키있으면 실행
    font_resize("containerCol", get_cookie("ck_font_resize_rmv_class"), get_cookie("ck_font_resize_add_class"));
});
</script>


<script src="http://kpma21.com/theme/bootstrap_kpmat/js/plugins.js"></script>
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/jquery.cookie.js"></script>
<!--nav-->

<script src="http://kpma21.com/theme/bootstrap_kpmat/js/hoverIntent.min.js"></script>

<!--nav mobile-->



<script src="http://kpma21.com/theme/bootstrap_kpmat/js/easyResponsiveTabs.js"></script>

<script src="http://kpma21.com/theme/bootstrap_kpmat/js/gbm.js"></script>
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/bootNav.js"></script>
<script src="http://kpma21.com/theme/bootstrap_kpmat/js/mega_nav.js"></script>

<script>
$("#clock").countdown("2019/08/15", function(event) {
    $(this).text(event.strftime("%D %H %M %S"));
});
</script>

<script type="text/javascript" type="text/javascript">
	jQuery(document).ready(function() {
		"use strict";
		jQuery('.side-contents, .sticky_sider').theiaStickySidebar({
			// Settings
			additionalMarginTop:0
		});
	});
</script>

<script>
$(document).ready(function() {
var userFeed = new Instafeed({
    get: 'user',
    userId: '2919780697',
    clientId: '93e6122b6c014f6f93783a2172db475c',
    accessToken: '2919780697.93e6122.930292cda5d74bb6812795ddc0677338',
    resolution: 'standard_resolution',
	after: function () {
           
        },
	filter: function(image) {
            if (image.type == 'image') {
                image.template = '<div class="view view-first"><img src="{{image}}" /><div class="mask"><a class="info" href="{{link}}" target="_blank"><p class="caption">{{caption}}</p><span class="likes"><i class="fa fa-heart-o"></i> {{likes}}</span><span class="comments"><i class="fa fa-comment-o"></i> {{comments}}</span></a></div></div>';
            } if (image.type == 'video') {
                image.template = '<video class="video-player" width="100%" controls loop><source src="{{model.videos.standard_resolution.url}}" type="video/mp4"></video>';
            }
            return true;
        },
	
    template: '<div class="grid-item">{{model.template}}</div>',
    sortBy: 'most-recent',
	links: false,
    limit:10
    
  });
  userFeed.run();
  
  setTimeout(function stack(){
	  var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});
	  }, 2000);});
  
 
</script>

<!--theiaStickySidebar이전이면 충돌-->
<script type="text/javascript">

$(document).ready(function() {

 $('.vid').vide({
  mp4: 'http://kpma21.com/theme/bootstrap_kpmat/video/tnb',
  webm:' http://kpma21.com/theme/bootstrap_kpmat/video/tnb',
  ogv: 'http://kpma21.com/theme/bootstrap_kpmat/video/tnb',
  poster: 'http://kpma21.com/theme/bootstrap_kpmat/video/tnb',
}, {
volume: 1,
  playbackRate: 1,
  muted: true,
  loop: false,
  autoplay: false,
  position: '50% 50%', // Similar to the CSS `background-position` property.
  posterType: 'jpg', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
  resizing: true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
  bgColor: 'transparent', // Allow custom background-color for Vide div,
  className: '' // Add custom CSS class to Vide div
});
});

</script> 

<!--
 <script>
        //$(function(){
            //$('#verticalTab').jqTabs();
        //});
    </script>
-->


<!-- ie6,7에서 사이드뷰가 게시판 목록에서 아래 사이드뷰에 가려지는 현상 수정 -->
<!--[if lte IE 7]>
<script>
$(function() {
    var $sv_use = $(".sv_use");
    var count = $sv_use.length;

    $sv_use.each(function() {
        $(this).css("z-index", count);
        $(this).css("position", "relative");
        count = count - 1;
    });
});
</script>
<![endif]-->

</body>
</html>
HTTP/1.1 200 OK
Date: Tue, 23 Apr 2024 08:54:18 GMT
Server: Apache
X-Powered-By: PHP/5.2.17
P3P: CP="ALL CURa ADMa DEVa TAIa OUR BUS IND PHY ONL UNI PUR FIN COM NAV INT DEM CNT STA POL HEA PRE LOC OTC"
Set-Cookie: PHPSESSID=706112ba2c935e218ff61276018ae5c5; path=/
Set-Cookie: 2a0d2363701f23f8a75028924a3af643=MTU3LjcuMTg0LjMw; expires=Wed, 24-Apr-2024 08:54:18 GMT; path=/
Expires: 0
Last-Modified: Tue, 23 Apr 2024 08:54:18 GMT
Cache-Control: pre-check=0, post-check=0, max-age=0
Pragma: no-cache
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8

iframe