@font-face {
  font-family: 'Paperlogy-light';
  font-style: normal;
  font-weight: 300; 
  src: url('../font/Paperlogy-3Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Paperlogy';
  font-style: normal;
  font-weight: 500; 
  src: url('../font/Paperlogy-5Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Paperlogy-8ExtraBold';
  font-style: normal;
  font-weight: 800; 
  src: url('../font/Paperlogy-8ExtraBold.ttf') format('truetype');
}



/* 기본 스타일 */
html { font-size:10px;    line-height: 1;} 
body { margin:0 auto; padding:0; margin: 0;  -webkit-text-size-adjust : none;
  font-family: 'Paperlogy',  "Apple SD Gothic Neo",  Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 1.8rem; color:#222222; line-height: 1.5;
  font-weight: 500; text-align: left;  letter-spacing:0.03rem; word-break:normal; word-break:keep-all; } 
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 } 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block } 
b{font-weight: 800;}
ul, dl,dt,dd { margin:0; padding:0; list-style:none } 
legend { position:absolute; margin:0; padding:0; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden } 
label, input, button, select, img { vertical-align:middle; } 
input, button { margin:0; padding:0;} 
input[type="submit"] {cursor:auto;} 
button {cursor: pointer; border: 0; background-color: transparent; padding: auto;  font-family: 'Paperlogy';} 
select {margin:0} 
p {margin:0;padding:0;  } 
hr { display:none } 
a { text-decoration:none; color:#222222; } 
a:hover { text-decoration: none; } 
*, :after, :before { 
  -webkit-box-sizing:border-box; 
  -moz-box-sizing:border-box; 
  box-sizing:border-box; 
  word-break: keep-all; 
  } 
.btn{flex-shrink: 0;} 
caption{font-size: 0px;}
img { max-width:100%; display:inline-block; height: auto; } 
.wrap{padding-top: 15rem;padding-bottom: 15rem;     min-height: 80rem;}
.container{width:100%; max-width: 1920px; padding:0 8rem ; margin: 0 auto;  }
h2{font-size: 4.6rem; font-weight: 800;  line-height: 1.2;}
h3{font-size: 4rem;  font-weight: 800;  line-height: 1.2;}
h4{font-size: 2.8rem;  font-weight: 800;   line-height: 1.2;}
h5{font-size: 2rem;  font-weight: 800;   line-height: 1.2;}

.br1{ display: none;}
.c_red{color: #F32844;}
/*list 스타일*/
ul.list_st01 > li{
    position: relative;
    padding-left: 15px;
}
ul.list_st01 > li:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: #000;
    top: 1rem;
    left: 0;
    }

/*스크롤숨기기*/
/* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */
.scroll::-webkit-scrollbar {
    display: none;
}
.scroll {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

/*스크롤모양*/
.scroll_bar::-webkit-scrollbar {
    width: 11px;  height: 11px;  /* 스크롤바의 너비 */
}
.scroll_bar::-webkit-scrollbar-thumb {
    height: 10%; /* 스크롤바의 길이 */
    background: #D6E0EA  ; /* 스크롤바의 색상 */
    border-radius: 20px; border: 3px #ffff solid;
}
.scroll_bar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.5);  /*스크롤바 뒷 배경 색상*/}


.scroll_y_bar{overflow-y: scroll;}
.scroll_y_bar::-webkit-scrollbar {  
    width: 11px;  height: 11px;  /* 스크롤바의 너비 */
}
.scroll_y_bar::-webkit-scrollbar-thumb {
    width: 10%; /* 스크롤바의 길이 */  
    background: #D6E0EA  ; /* 스크롤바의 색상 */
    border-radius: 20px; border: 3px #ffff solid;
}
.scroll_y_bar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.5);  /*스크롤바 뒷 배경 색상*/ border-radius: 20px; }

/*글자 줄임말/자르기*/
.line_text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all;word-break: break-all;} 
.line1_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;word-break: break-all;} 
.line2_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;word-break: break-all;} 
.line3_text { white-space: normal; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;word-break: break-all;} 

/*기본버튼*/
.btnst1{color: #fff;  background: #000; border: #000 1px solid; display: inline-block ;}
.btnst1:hover{ background: #353535;}

/* 이미지 크롭 */
.rect{width: 100%;position: relative;overflow: hidden; } 
.rect:after{content: "";display: block;padding-bottom: 100%; } 
.rect img{ position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;transform: translate(-50%,-50%);}

 /* 이미지 세로 230*330 교육*/
.rect2 { width: 100%; position: relative; overflow: hidden;}
.rect2:after {content: "";display: block;padding-bottom: calc(330/230* 100%); }
.rect2 img {position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;
transform: translate(-50%,-50%);
}

/* 이미지 세로 500*674 공연*/
.rect3 { width: 100%; position: relative; overflow: hidden;}
.rect3:after {content: "";display: block;padding-bottom: calc(674/500* 100%); }
.rect3 img {position: absolute;width: 100%;height: 100%;object-fit: cover;object-position: center;top: 50%;left: 50%;
transform: translate(-50%,-50%);
}

/*상단*/
#header{position: fixed; background: #fff; width:100%; z-index: 100;}
.header{width:100%;max-width: 1920px;padding:0 8rem;margin: 0 auto;} 
.header .header_con{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;     height: 15rem;
  align-items: center;
}

.header_con h1 a{ display: flex;}
.header .header_con.show{height: 10rem;}
.nav{ display: flex; align-items: center;}
.nav ul{display: flex;}
.nav ul li{padding: 0rem 2.2rem ;}
.nav ul a{font-size: 2.6rem; font-weight: 800;}
.nav ul a:hover{text-decoration: underline;}
.nav ul a.on{text-decoration: underline;}
.lang-btn{
  color: #fff;
  background: #000;
  padding: 1rem 2rem;
  border-radius: 6rem; margin-left: 9rem;
}
.m_nav_wrap, .m_nav_open{display: none;}

/*하단*/
.footer{
    width: 100%;
    max-width: 1920px;
    padding: 0rem 8rem;
    margin: 0 auto;
}
.footer, .footer a{font-size: 1.4rem;}
.footer .footer_body{display: flex;justify-content: space-between;border-top: #000 2px solid;padding: 4rem 0rem;/* flex-wrap: wrap; */}
.footer-info{}
.foot_sns{
    display: flex;
    margin-bottom: 3rem;
    justify-content: flex-end;
}
.foot_sns li{
    margin-left: 1.8rem;
}
.foot_sns li a{}
.footer_link{
    display: flex;
    flex-wrap: wrap;
}
.footer_r{ flex-shrink: 0; margin-left: 4rem; text-align: right;}
.footer_link a{ margin-right: 1rem;font-weight: 800;padding: 0.5rem;}
.footer_txt1{color:#a2a2a2; margin-bottom: 1.2rem;margin-top: 2.5rem;line-height: 1.4;}
.footer_txt2{color:#a2a2a2; font-size: 1.3rem;}

/*메인*/

/*메인> 슬라이드*/
.main_banner{margin-top: 10.7rem;}
.banner_txt{    margin-right: 2rem;}
.banner_txt_wrap{
    display: flex;
    margin-bottom: 8rem;
    justify-content: space-between;
    align-items: flex-end;
}
.banner_txt{}
.banner_txt .t1{font-size: 5.5rem; font-weight: 800; }
.banner_txt .t2{font-size: 2.8rem; margin-top: 0.8rem ; font-family: 'Paperlogy-light';  }
.banner_arrow{display: flex;width: 200px;font-size: 2rem;font-weight: 800;color: #E3E3E3; align-items: center;}
.main_banner .swiper-button-next{margin:0rem;position: relative;width: 37px;flex-shrink: 0;right: auto;height: 40px;}
.main_banner .swiper-button-prev{ margin:0rem;position: relative;width: 37px;
  left: auto;top: auto;flex-shrink: 0;}
.main_banner .swiper-pagination{position: relative;bottom: auto; }
.main_banner .swiper-button-next:after, .main_banner .swiper-button-prev:after{font-size: 0;}
.main_banner .swiper-pagination-current{ color:#000}
.main_banner .swiper-slide img{ width: 100%; max-width: 100%;}

/*메인>신명나는 공연*/
.performance{margin-top: 10rem;}
.tit_st{display: flex;justify-content: space-between;align-items: center;margin-bottom: 5rem;}
.tit_st a{width: 37px;}
.card_wrap{}
.card_wrap .cols4{display: flex;flex-wrap: wrap;margin-right: -2rem;margin-left: -2rem;}
.card_wrap .cols4 li{
  padding-right: 2rem;
  padding-left: 2rem;
  flex: 0 0 25%;
  max-width: 25%;
  margin-bottom: 11rem;
  }

 .card{} 
 .card_img{border-bottom: #000 1px solid;padding: 7%;position: relative;}
 .card_img img{z-index: 2;  }
 .card_img:after{content:'';background-color: #ECECEC;display: block;position: absolute;width: 100%;height: 40%;bottom: 0;left: 0; z-index: 1;}
 .card_wrap a:hover .card_img:after{height: 100%;  background-color: #ECECEC; transition: all 0.3s ease-in-out;  }

 .card_txt{
    margin-top: 3rem;
}
.inb{display:inline-block}
.card_txt .t1{
    font-weight: 800;
    line-height: 1.4;
    font-size: 2rem;
}
.card_txt .t2{
    font-size: 1.4rem;
    color: #A2A2A2;
    margin-top: 1rem;
    margin-bottom: 2.4rem;
}
.badge{
    padding: 0.8rem 1.6rem; font-size: 1.5rem;
    border-radius: 30px;
    background: #000;
    color: #fff;
    display: inline-block; border:#000 1px solid
}
.badge.badge2{ background: #fff; color: #000;}
.badge_line span{margin-right: 1rem;}

/*메인>연구*/
.research{  display: flex; }
.research_wrap{ display: flex; }
.research .re_l{flex: 1; width: 50%; height: 34rem; background: url('../img/m_img01.jpg') no-repeat ; background-size: cover;}
.research .re_r{flex: 1; width: 50%; height: 34rem; background: url('../img/m_img02.jpg')no-repeat ; background-size: cover; text-align: center; display: flex;  align-items: center;justify-content: center; color: #fff; font-size: 1.6rem;}
.research .re_r .t1{ font-size: 4.6rem; font-weight: 800; margin-bottom: 1rem;}

/*메인>교육*/
.education{margin-bottom: 9rem; }
.list_edu{width: 100%; border-top: #000 2px solid;}
.list_edu .edu{width: 100%;border-bottom: #000 1px solid; display: flex; justify-content: space-between; align-items: center; padding: 0rem 2rem;}
.list_edu .edu .t1{ }
.list_edu .edu .t2{ padding: 3rem 3rem;font-size: 2rem; flex:2; font-weight: 800;  }
.list_edu .edu .t3{font-size: 1.5rem; color: #A2A2A2;  }

/*메인>관람권/소개/뉴스레터 버튼*/
.main_link{margin-top: 12rem;}
.main_btn{display: flex;margin: 0rem -0.5rem;}
.main_btn .box{background-color: red;flex: 1;height: 37rem;font-size: 1.6rem;margin: 0.5rem;}
.main_btn .box a{display: block;padding: 6rem;color: #fff;height: 100%;}
.main_btn .box.box1{background: url('../img/m_img03.jpg') no-repeat ; background-size: cover;}
.main_btn .box.box2{background: url('../img/m_img04.jpg') no-repeat ; background-size: cover;}
.main_btn .box.box3{background: url('../img/m_img05.jpg') no-repeat ; background-size: cover;}
.main_btn .box h2{font-size: 4rem; font-weight: 800; margin-bottom: 2rem;}
.main_btn .bat {border-radius: 20px; border: #fff 1px solid; padding: 0.8rem 1.9rem; font-size: 1.5rem; margin-top: 4rem; display: inline-block;}

/*공연*/
.cate_menu2 {font-size: 0;margin-bottom: 5rem;}
   .checkdiv {position: relative;display: inline-block;     margin-bottom: 0.5rem;}
   .checkdiv input[type="radio"].checkmark {display: none;}
   .checkdiv input[type="radio"].checkmark + label {
       border: 1px solid #222222;
       padding: 1.8rem 3rem;
       font-size: 1.8rem;
       display: inline-block;
       cursor: pointer;
       line-height: 20px;
       color: #222222;
       text-align: center;
       background: #ffffff;
       border-radius: 50px;
       margin-right: 1rem;
      
   }
   .checkdiv input[type="radio"].checkmark:checked + label {    background: #202020;    color: #ffffff;   }
.deps_wrap{ margin-bottom: 3rem;
    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    overflow-y: scroll;
    display: flex;
}
.deps_wrap button{
    font-size: 2.2rem;
    color: #A2A2A2;
    padding: 2.6rem 0rem;
    margin-right: 4rem;
}
.deps_wrap button.on{
    font-weight: 800;
    color: #000;
    border-bottom: #222 2px solid;
}
.deps_wrap button:hover{ color: #000; font-weight: 800;}


/*공연>상세*/
.view_tit{display: flex;align-items: flex-end;margin: 7rem 0rem;justify-content: space-between;}
.view_tit .view_tit_btn{width: 25rem;margin-left: 2rem;flex-shrink: 0;}
.view_tit h3{ margin-top: 2rem; }
.view_tit .view_tit_btn .btnst1{font-size: 2rem;width: 100%;padding: 2.5rem 1rem;text-align: center;}
.view_info{margin-top: 6.5rem; line-height: 1.6;}
.view_info h4{ margin-bottom: 2rem;}
.view_info2{background-color: #f5f5f5;padding: 3rem 3rem 0rem 3rem; margin-top: 6rem;display: flex; flex-wrap: wrap;}
.view_img{text-align:center;}
.view_img img{max-height:50rem ;}
.dt_st2{ display: flex; margin-bottom: 3rem; flex: 0 0 50%; max-width: 50%;     padding-right: 5%;}
.dt_st2 dt{ width:14rem ; flex-shrink: 0; font-weight: 800;}
.dt_st2 dd{flex-grow: 1;}

.viewslide .swiper-slide {width: auto;}
.viewslide .swiper-slide img {
  display: block;
  width: auto;
  height: 50rem;
  object-fit: cover; 
}
.viewslide .swiper-button-next, .viewslide .swiper-button-prev{ top:calc( 50% - 50px );background: rgba(0, 0, 0, 0.4); margin: 0; padding: 3rem 2rem; width: auto; height: auto;}
.viewslide .swiper-button-next {
  right: 0;
}

.viewslide .swiper-button-prev {left:0;}

.viewslide .swiper-button-next::after,
.viewslide .swiper-button-prev::after {
  display: none;
}

/*교육*/
.edu_wrap{}
.edu_wrap .cols2{display: flex;flex-wrap: wrap;margin-right: -2rem;margin-left: -2rem;}
.edu_wrap .cols2 li{ padding-right: 2rem; padding-left: 2rem; flex: 0 0 50%; max-width: 50%; margin-bottom: 4rem; }

  .edu_box{border:#e3e3e3 1px solid; border-top:#222 2px solid; padding: 4rem; display: flex;  height: 100%;}
.edu_img{   max-width: 210px;  width: 100%;margin-right: 5rem;}
.edu_txt{ }
.edu_txt .txt1{font-size: 1.5rem; color: #A2A2A2; margin-top: 0.6rem; margin-bottom: 0.5rem;}
.edu_txt .txt2{font-size: 2.8rem; font-weight: 800; margin-bottom: 2.5rem; }
.dt_st1{ display: flex; margin-bottom: 1rem;}
.dt_st1 dt{ width:12rem ; flex-shrink: 0; font-weight: 800;}
.dt_st1 dd{flex-grow: 1; word-break:break-all; }
.edu_btn{   padding:1.4rem 6.6rem ;  margin-top: 2rem;}

.edu_view{display:flex;margin-top: 7rem;}
.edu_view .ed_img{margin-right: 7%;width: 43%;}
.edu_view .ed_img img{position: sticky; top:15rem}
.edu_view .edtxt{width: 50%;}
.edu_view .edtxt.noimg{width: 100%;}
.edu_view .edtxt2{margin: 3rem 0rem;padding: 2rem 2rem 1rem 2rem;background: #f5f5f5;}
.edu_view h3{margin-top: 1rem;}
.edu_view .edtxt3 h4{ margin-bottom: 1rem;  }

/*연구*/
.research_top{margin-top: 5rem;width: 100%; height:27rem ; display: flex; text-align: center; justify-content: center; background: url('../img/research_img1.jpg') no-repeat ; background-size: cover; color: #fff; font-size: 1.6rem;     align-items: center; background-position: center; }
.research_top h2{margin-bottom:1.2rem ;}

.research_list{margin-top: 5rem; border-bottom:#000 1px solid}
.research_list .r_lst{border-top:#000 1px solid; position: relative; padding: 6rem 0rem; display: flex;}
.research_list .r_lst::before{content: ''; position: absolute; top: 0; left: 0; width: 3rem; height: 0.4rem; background-color: #000;}
.research_list h3{   width: 40rem; flex-shrink: 0;}
.research_list h4{   margin-bottom: 2rem;}

.research_list dd{ }
.dt_st3{ display: flex; margin-bottom: 1rem;}
.dt_st3 dt{ width:13rem ; flex-shrink: 0; font-weight: 800;}
.dt_st3 dd{flex-grow: 1;}

/*관람권>회원가입*/
.ticket_top{margin-top: 9rem; margin-bottom: 7rem; padding-bottom: 7rem; border-bottom: #000 1px solid;}
.ticket_top h3{ margin-bottom: 2rem;}
.ticket_btn{    font-size: 2rem; padding: 2.2rem 6.5rem; text-align: center; margin-top: 3rem;}
.ticket_wrap{display: flex;}
.ticket_wrap > div{flex:1}
.ticket_wrap .txt1{display: flex;margin-bottom: 3rem;}
.ticket_wrap .num_txt{        flex-shrink: 0;text-align: center;background-color: #000;display: inline-block;width: 3rem;height: 3rem;color: #fff;font-size: 1.8rem;border-radius: 5rem;line-height: 3rem;margin-right: 1rem;}
.ticket_wrap h3{  margin-bottom: 3.5rem;}
.ticket_wrap h4{font-size: 2.4rem; }
.ticket_wrap p{color: #A2A2A2;}

/*테이블*/
.table_01 {width:100%; border-collapse: collapse;   border-bottom:1px solid #e3e3e3;  border-top: 2px #000 solid;}
.table_01  th {background: #F5F5F5;    border:1px solid #e3e3e3;  text-align:center;    }
.table_01 td {    border:1px solid #e3e3e3;  }
.table_01 th, .table_01 td{ padding:2rem 2rem;}
/*테이블 반응형때
.table_scroll { overflow-x: auto; overflow-y: hidden; padding: 0px !important; }*/

/*관람권>예매안내*/
.rev_wrap{margin-top: 5rem;}
.rev_wrap{   margin-top: 5rem; display: flex; flex-wrap: wrap; margin-right: -2rem; margin-left: -2rem;}
.rev_box{flex: 0 0 50%; max-width: 50%; padding-right: 2rem; padding-left: 2rem;}
.rev_box dl{border: #222 3px solid; height: 100%;}
.rev_box dt{ padding:3rem 4rem; background-color: #222; font-weight: 800; color: #fff; font-size: 2.8rem;}
.rev_box dt img{margin-right: 2rem;}
.rev_box dd{padding:4rem  4rem;}

.rev_wrap2{display: flex; margin-top: 8rem; margin-right: -2rem; margin-left: -2rem;}
.rev_wrap2 > div{flex: 0 0 50%; max-width: 50%;  padding-right: 2rem; padding-left: 2rem;}
.rev_wrap2 h4{margin-bottom: 2rem;}
.ticket_sale{display: flex; margin-bottom: 3rem;}
.ticket_sale .tic_img{flex-shrink: 0; margin-right: 3rem;}
.ticket_sale dl{margin-bottom: 0.5rem;}

/*관람권>객석나눔*/
.audi_top{margin-top: 5rem; margin-bottom: 5rem;}
.audi_txt1{margin-top: 2rem; margin-bottom: 2rem;  white-space: pre-line; font-size: 2.2rem ; line-height: 1.4;}
.audi_txt2{  white-space: pre-line; color:#5E5E5E;}
.audi_img{ display: flex; margin-bottom: 3.6rem;}
.audi_img img{width: 100%;}
.audi_img p{flex:1}

.audi_info{width: 100%; background-color: #f5f5f5; padding:3rem 5rem; display: flex; margin-top: 5rem; align-items: center;}
.audi_info .audi_img2{margin-right: 5rem;}
.link_a, .link_a:hover{text-decoration: underline;}

/*소개>국립부산국악원*/
.guide{margin: 11rem 0rem 9rem; text-align: center;}
.guide .txt1{margin: 2rem 0rem 4.5rem; font-size: 2.2rem;  white-space: pre-line;}
.guide .txt2{white-space: pre-line; color: #5E5E5E;}
.busangugak_img img{width: 100%;}
/*소개>국악연주단*/
.gugak{margin-top: 5rem;}
.gugak h3{margin-bottom: 3rem;}
/*2단모양일때*/
.grid2{display: flex;flex-wrap: wrap;margin-right: -2rem;margin-left: -2rem;}
.grid2 > li{ padding-right: 2rem; padding-left: 2rem; flex: 0 0 50%; max-width: 50%; margin-bottom: 10rem;}
.gugak_box{}
.gugak_box .gugak_txt{background-color: #fff;padding: 4rem;margin-top: -5.5rem;z-index: 2;position: relative;margin-left: 1rem;margin-right: 1rem; padding-bottom: 0 !important;} 
.gugak_box .gugak_txt h4{font-size: 4rem;font-weight: 500;margin-bottom: 2rem;}

.video_wrap{width: 100%;   position: relative; }
.video_wrap video{image-rendering: -webkit-optimize-contrast;}
.video_wrap video{position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); z-index: -1; object-fit: contain; object-position: center;}
.video_wrap::after{content: ''; position: relative; display: block; padding-bottom: calc(1080/1920*100%);} 


/*소개>국악체험관*/
.exp{margin-top: 10rem; display: flex;}
.exp h3{}
.exp .txt1{margin: 2rem 0rem 1rem; font-size: 2.2rem;}
.exp .txt2{color:#5E5E5E ; margin-bottom:5rem ;}
.exp_r{flex-shrink: 0; width: 50%; margin-left: 5%;}

.exp_tit{font-size: 4rem; font-weight: 800; width: 24rem; flex-shrink: 0; }
.exp_info{border-top: #000 1px solid; margin-top: 2rem;}
.exp_info li{border-bottom: #000 1px solid; padding: 4rem; display: flex;}
.exp_info h4{width: 24rem; }
.exp_info h4.st2{width: 100%; align-items: center; display: flex ;}
.exp_box{display: flex;  align-items: center; }
.exp_box .exp_box_img{width: 59.5rem; margin-right: 10rem; flex-shrink: 0; height: 100%;}
.exp_box .txt1{color: #A2A2A2; margin-top: 1rem; margin-bottom: 4rem;}

/*소개>편의시설*/
.faci{margin-top: 5rem;}
.faci h3{margin-bottom: 3rem;}
.faci .faci_box{display: flex; align-items: center;}
.faci .faci_box2{padding-left: 6rem;}
/*소개>소셜미디어*/
.social{margin-top: 5rem;}
.social .grid2{margin-top: 5rem; flex-wrap: wrap;}
.social .sns_box{display: flex; align-items: center; }
.social .sns_img{margin-right: 4rem;}
.social .sns_link{  background: url('../img/link.png') no-repeat 0px 3px  ; padding-left: 3.3rem; margin-top: 1rem;}
.social .sns_link a{word-break: break-all;}
.social .sns_link:hover{text-decoration: underline;}
.social .sns_link2{margin-top: 1rem;}

/*소개>오시는길*/
.map{margin-top: 5rem;}
.map .grid2{margin-top: 5rem;}
.map .map_box{display: flex; margin-bottom: 3rem;}
.map .map_box .lo_img{ flex-shrink: 0; margin-right: 2rem;}
.map .map_box h4{font-size: 2.4rem; margin-bottom: 1rem;}
.map .map_box .list_st01{border-top: #E3E3E3  1px  solid; padding-top: 1.5rem; margin-top: 1.5rem;}
.map .grid2 > li{margin-bottom: 0 !important;}
.map ul.list_st01 > li:last-child{margin-top: 1rem;}
/* 반응형 처리 **********************************/
@media (max-width: 1400px) {
  html { font-size:8.5px;  }
}
@media (max-width: 1200px) {
  .nav ul li{    padding: 0rem 1.2rem;}
  .nav ul a{    font-size: 2.4rem;}
  .lang-btn{    margin-left: 3rem;}

/*교육*/
.edu_wrap .cols2 li{    flex: 0 0 100%;  max-width: 100%;}

  .exp_info li{display: block;}
  .exp_box .exp_box_img{    width: 40.5rem;     margin-right: 5rem;}
  .exp_box .txt1{    margin-bottom: 2rem;     margin-top: 0rem;}

  /*소개>소셜미디어*/
  .social .sns_img{    width: 7rem; flex-shrink: 0;}
}

/* 태블릿 **********************************/
@media (max-width: 1024.1px) {
  .wrap{    padding-top: 5rem;     padding-bottom: 6rem;     min-height: auto;}
  .nav ul{display: none;}
  .m_nav_open{display: block;}
  .logo{width: 147px;}
  .header .header_con.show,  .header .header_con{height: 5.5rem;}
  .lang-btn{font-size: 1rem; padding: 0.6rem 1rem; margin-right: 2rem; }
  .header .header_con{border-bottom: 0px;}

/*모바일메뉴*/
/* 기본 스타일 */
.m_nav_wrap {
  position: fixed;
  top: 0;
  right: -100%; /* 메뉴 숨기기 */
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: right 0.2s ease-in-out; /* 부드러운 애니메이션 */ display: flex; flex-direction: row-reverse;
  }
  
  /* 메뉴 활성화 */
  .m_nav_wrap.active {right: 0; /* 메뉴 보이기 */}
  .m_nav_top{display: flex;justify-content: space-between;padding: 2rem 0rem;border-bottom: 1px solid #000;margin-bottom: 3rem;}
  
  /* 닫기 버튼 스타일 */
  .m_nav_close { padding: 0.5rem;cursor: pointer;}
  
  /* 열기 버튼 스타일 */
  .m_nav_open {background: transparent; color: black;cursor: pointer;}
  
  .m_nav{ width: 100%;background: #fff; height: 100vh; max-width: 400px; padding: 0rem 5%;}
  .m_nav_menu{}
  .m_nav_menu li a{
      padding: 1.2rem 0rem;
      width: 100%;
      display: block; font-size: 2rem;
      font-weight: 800;
  }
  h2{font-size: 3.6rem;}
  h3{font-size: 3rem;}

  /*메인*/
  .main_banner{    margin-top: 6.7rem;}
  .banner_txt .t1{    font-size: 4rem;}
  .banner_txt .t2{    font-size: 2.2rem;}
.banner_txt_wrap{    margin-bottom: 4rem;}
.tit_st{    margin-bottom: 2rem;}
.banner_arrow{width: 150px;}
/*메인>공연*/
.performance{    margin-top: 6rem;}
.card_wrap .cols4 li{    flex: 0 0 33.333%; max-width: 33.333%;     margin-bottom: 6rem;}
/*메인>연구*/
/*메인>교육*/
.education{  margin-bottom: 6rem;}
/*메인>관람권/소개/뉴스레터 버튼*/
.main_link { margin-top: 5rem;}
.main_btn .box{    height: 30rem;}
.main_btn .box a{    padding:4rem 3rem;}
.main_btn .box h2{    font-size: 2.4rem;}

/*공연*/
.deps_wrap button{    font-size: 1.8rem; padding: 2rem 0rem;}
.checkdiv input[type="radio"].checkmark + label{ font-size: 1.6rem; padding: 1.2rem 2rem;  margin-bottom: 0.5rem;  }
.cate_menu2{    margin-bottom: 2rem;}


/*연구*/
.research_list h3{width: 20rem;}

/*관람권>회원가입*/
.ticket_wrap{display: block;}

/*관람권>예매안내*/
.rev_wrap{display: block; margin: 3rem 0rem;}
.rev_box{padding: 0; margin-bottom: 1em; max-width: 100%;}
.rev_wrap2{display: block; margin: 4rem 0rem 0rem;}
.rev_wrap2 > div{padding: 0;  max-width: 100%;}

/*관람권>객석나눔*/
.audi_txt2{    white-space: normal;}

/*소개>국립부산국악원*/
.guide .txt1{    white-space:normal; }
.guide .txt2{ white-space:normal; }

/*소개>국악체험단*/
.exp {display: block;     margin-top: 5rem;}
.exp_r{width: 100%; margin-left: 0%; margin-top: 5rem;}

/*소개>국악연주단*/
.gugak_box .gugak_txt h4{    font-size: 2.8rem;}
.gugak_box .gugak_txt{    padding: 3rem;}

/*소개>오시는길*/

}


/* 반응형 처리 768 **********************************/
@media (max-width: 768.1px) {
html { font-size:9.2px;  }
body{font-size: 15px;}
.header{padding: 0 4rem;}
.footer{padding: 0 4rem;}
.container{padding: 0 4rem;}
.br1{ display: block;}
.banner_arrow{font-size: 1.2rem;}
ul.list_st01 > li{    padding-left: 10px;}

h2{font-size: 2.2rem;}
h3{font-size: 2.4rem;}
h4{font-size: 2.2rem; }
h5{font-size: 1.5rem;}

/*메인> 공연*/
.badge{padding: 0.3rem 1.2rem;font-size: 1.4rem;}
.badge_line span{margin-right: 0.6rem;}
.main_banner .swiper-button-next, .main_banner .swiper-button-prev{    width: 2rem;}

/*메인> 연구*/
.research_wrap{display: block;}
.research .re_l{height: 15rem; width: 100%;}
.research .re_r{height: 15rem; width: 100%; font-size: 1.45rem;  font-family: 'Paperlogy-light';}
.research .re_r .t1{font-size: 2.1rem;}

/*메인>교육*/
.list_edu .edu{display: block;padding: 1.5rem 1rem;}
.list_edu .edu .t2{font-size: 1.8rem;padding: 0.8rem 0rem  0.5rem;}
.list_edu .edu .t3{font-size: 1.3rem;}

/*메인>버튼3*/
.main_link{        margin-top: 3rem;}
.main_btn{display: block;  }
.main_btn .box{ flex: auto; width: 100%;  height: 17rem; }
.main_btn .box a{ font-size: 1.3rem; }
.main_btn .box h2{        font-size: 2.1rem;     margin-bottom: 0.6rem;}
.main_btn .bat{font-size:1.3rem ; margin-top: 1rem;     padding: 0.4rem 1.7rem;}


  /*하단*/
  .footer, .footer a{font-size: 1.2rem;}
  .footer .footer_body{flex-direction: column; padding: 3rem 0rem;}
  .footer_r{text-align: center; margin-left: 0rem; margin-top: 3rem;}
  .foot_sns{    justify-content: center;     margin-bottom: 1.5rem;}
  .footer_txt1{margin-top: 1.4rem;}
  .footer_txt1 span{display: inline-block;}
  .footer_txt2{font-size:1.1rem ;}
  .foot_sns li{margin-left: 1rem; margin-right: 1rem;}

  .card_wrap .cols4 li{flex: 0 0 50%;  max-width: 50%;}

  /*공연>상세*/
  .view_tit{    flex-direction: column; align-items: baseline; margin: 5rem 0rem;}
  .view_tit h3{margin-top: 1rem;}
  .view_tit .view_tit_btn{    width: 100%; margin-left: 0rem; margin-top: 3rem;}
  .view_tit .view_tit_btn .btnst1{padding: 1.2rem 1rem;}
  .viewslide .swiper-slide img{height: 22rem;}
  .viewslide .swiper-button-next img, .viewslide .swiper-button-prev img{width:1.5rem ;}
  .viewslide .swiper-button-next, .viewslide .swiper-button-prev{padding: 1.5rem 1rem; top: calc(50% - 25px);}
  .view_info{    margin-top: 4rem;}
  .view_info2{    padding: 2rem 2rem 0rem 2rem;     margin-top: 4rem;}
  .view_info h4{    margin-bottom: 1rem;}
  .dt_st2{flex: 0 0 100%;max-width: 100%;margin-bottom: 2rem;font-size: 1.4rem;}
  .dt_st2 dt{width: 10rem;}

  /*교육>목록*/
  .edu_img{    max-width: 120px;     margin-right: 2rem;}
  .edu_txt .txt2{    font-size: 2.2rem;     margin-bottom: 1.5rem;}
  .dt_st1{ font-size: 1.4rem;}
  .dt_st1 dt{    width: 8rem;  }
  .dt_st1 dd{padding-left: 1rem;}
  .edu_txt .txt1{    margin-top: 0rem;}

  .edu_view{display: block;margin-top: 3rem;}
  .edu_view .ed_img{width: 100%; margin-left: 0rem; margin-bottom: 3rem;}
  .edu_view .ed_img img{position: relative; top:auto}
  .edu_view .edtxt{width: 100%;}
  .edu_box .edu_btn{width: 100%; text-align: center;}


  /*연구*/
  .research_top{    height: 14rem;    font-size: 1.4rem; margin-top: 3rem;}
  .research_list .r_lst{display: block; padding: 4rem 0rem;}
  .research_list h3{ width: auto; font-size: 3rem; margin-bottom: 4rem;}
  .dt_st3{display: block; font-size: 1.5rem;}
  .dt_st3 dd{padding-left: 0.9rem;}

/*관람권>회원가입*/
.ticket_top{margin-top: 5rem; margin-bottom: 4rem;padding-bottom: 4rem;}
.ticket_btn{padding: 1.2rem 5rem;}
.ticket_wrap h3{    margin-bottom: 1.5rem;}
.ticket_top h3{margin-bottom: 1rem;}
.ticket_wrap h4{    font-size: 1.8rem;}
.ticket_wrap .num_txt{width: 2.4rem; height: 2.4rem; line-height: 2.4rem; font-size: 1.5rem;}
.ticket_wrap .txt1{    margin-bottom: 2rem;}
.ticket_wrap > div:first-child{margin-bottom: 5rem;}
.table_01 th, .table_01 td{padding: 1.5rem 0.8rem;}

/*관람권>예매안내*/
.rev_box dt{font-size: 2rem;     padding: 1.5rem 2rem;}
.rev_box dt img{width:2.8rem ;}
.rev_box dd{    padding: 2rem 2rem;}
.ticket_sale .tic_img{width: 6rem;     margin-right: 2rem;}
.rev_wrap2 h4{margin-bottom: 1rem;}

/*관람권>객석나눔*/
.audi_txt1{font-size: 2rem; white-space: normal;}

/*소개>국립부산국악원*/
.guide{    margin: 7rem 0rem 4rem;}
.guide .txt1{    font-size: 1.7rem;     margin: 2rem 0rem 2.5rem;}
/*소개>국악연주단*/
.grid2{    margin-right:0rem; margin-left: 0rem;}
.grid2 > li{    flex: 0 0 100%; max-width: 100%; padding: 0rem;     margin-bottom: 5rem; }
.gugak{    margin-top: 3rem;}
.gugak h3{    margin-bottom: 1.5rem;}
.gugak_box .gugak_txt h4{font-size: 2.2rem;     margin-bottom: 1rem;}
.gugak_box .gugak_txt{padding:3rem  2rem;     margin-top: -3rem;}

/*소개>국악체험관*/
.exp{ margin-top: 3rem;}
.exp_info li{padding: 2rem 0.5rem;}
.exp_box{display: block;}
.exp_box .exp_box_img{width: 100%; margin-bottom: 1rem;}
/*소개>편의시설*/
.faci .faci_box2{padding-left: 0rem;}
.faci h3{    margin-bottom: 1rem;}
.faci .faci_box2 h3{font-size: 2rem;}
.grid2.faci_box li{        margin-bottom: 3rem;}
/*소개>소셜미디어*/
.social{margin-top: 3rem;}
.social .grid2 > li{margin-bottom: 3rem;}
.social .sns_img{ width: 4.5rem;     margin-right:1.7rem;}
.social .sns_link a{font-size: 1.3rem;}
.social .sns_link{background: url(../img/link.png) no-repeat 0px 5px;
  background-size: 15px;
  padding-left: 2rem;
  margin-top: 0.5rem;line-height: 1.3;
 }
 .social .sns_link2{font-size: 1.4rem;}
 .social ul.list_st01 > li:before{top: 0.6rem;}
/*소개>오시는길*/
.map{margin-top: 3rem;}
.map .map_box h4{font-size: 1.8rem; margin-bottom: 0.3rem;}
.map .map_box .lo_img{margin-right: 1rem; width: 2.6rem;}

  }
/* 반응형 처리 425 **********************************/

  @media (max-width: 425.1px) {
.header{padding: 0 2rem;}
.footer{padding: 0 2rem;}
.container{padding: 0 2rem;}

/*메인> 슬라이드*/
.banner_txt .t1{font-size: 2.4rem;}
.banner_txt .t2{font-size: 1.1rem;}
.banner_arrow{ width: 110px;}
.main_banner{ margin-top: 5.2rem;}
.main_banner .swiper-pagination{      }
.banner_txt_wrap{        margin-bottom: 2.7rem;}
/*메인> 공연*/
.tit_st{font-size: 2.6rem;         margin-bottom: 1rem;}
.tit_st a{ width: 2.3rem;}
.performance{margin-top: 4.2rem;}
.card_wrap .cols4{}
.card_wrap .cols4 li{flex: 0 0 100%; max-width: 100%; margin-bottom: 5rem;}
.card_img{    padding: 4%;}
.card_txt{margin-top: 2rem;}
.card_txt .t1{font-size: 1.7rem;}
.card_txt .t2{    margin-bottom: 1.8rem;}




/*공연>목록*/
.deps_wrap{    margin-bottom: 2rem;}
.deps_wrap button{    font-size: 1.6rem; padding: 2rem 0rem 1rem;     margin-right: 2rem;}
.checkdiv input[type="radio"].checkmark + label{ font-size: 1.35rem; padding: 0.7rem 1.2rem;     margin-right: 0.4rem;  }
.cate_menu2{    margin-bottom: 1.5rem;}

  /*교육>목록*/
  .edu_box{    padding: 2rem; display: block;}
  .edu_img{max-width: 100%; margin-right: 0; margin-bottom: 2rem;}
 
  /*교육>관람권*/
  .audi_top{margin: 3rem 0rem;}
  .audi_txt1{    white-space: normal; font-size: 1.8rem;}
  .audi_img{display: block;}
  .audi_info{     margin-top: 3rem;     padding: 2rem 2rem; align-items: flex-start;}
  .audi_info .audi_img2{    margin-right: 2rem;}

  }