@charset "UTF-8";
/*------------------------------------------------------------------------------
    파일정의 : 메인 페이지 스타일
    분류순서 : @import, @메인 콘텐츠 요소, @팝업
    속성순서 : 태그속성, 레이아웃, 사이징, 박스모양, 문단모양, 글자모양, 기타모양
    @media : 2560(PC~) / 1920 / 1800 / 1600 / 1500 / 1460 / 1280(Tablet~) / 1024 / 767(Mobile~) / 640 / 480 / 360
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------
    @import
------------------------------------------------------------------------------*/
@import url("base.css");
@import url("components.css");
@import url("layout.css");
/* @import url("board.css"); */

/*------------------------------------------------------------------------------
    @메인 콘텐츠 요소
------------------------------------------------------------------------------*/
.main_menu { position: fixed; top: 50%; right: 60px; line-height: 8px; text-align: right; transform: translateY(-50%); z-index: 50; }
.main_menu li + li { margin-top: 15px; }
.main_menu li a { display: inline-block; position: relative; vertical-align: top; }
.main_menu li a .txt { display: block; min-width: 8px; max-width: 8px; height: 8px; color: transparent; font-size: 0; line-height: 20px; font-weight: 500; letter-spacing: -0.7px; overflow: hidden; transition: .2s; }
.main_menu li a .txt::before { content: ''; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border-radius: 4px; background: #fff; transition: .2s; }
/* 2022-07-13 정승훈 : UI 수정 */
.main_menu li.active a .txt { max-width: 100px; height: 30px; padding-bottom: 10px; color: #fff; font-size: 14px; }
.main_menu li.active a .txt::before { width: 100%; background: #fff; }
/* .main_menu li.active a .txt { max-width: 100px; height: 30px; padding-bottom: 10px; color: #ef59a1; font-size: 14px; }
.main_menu li.active a .txt::before { width: 100%; background: #ef59a1; } */
/* //2022-07-13 정승훈 : UI 수정 */

.scroll_intro { position: fixed; right: 60px; bottom: 60px; width: 0; height: 0; background-repeat: no-repeat; background-position: center center; background-size: contain; pointer-events: auto; z-index: 30; transition: .2s; }
.scroll_intro.down { width: 100px; height: 200px; background-image: url(../imgs/main/btn_scrolldown.svg); }
.scroll_intro.up { width: 41px; height: 176px; background-image: url(../imgs/main/btn_scrolltop.svg); }

.fp-responsive .scroll_intro { display: none; }

#mainSection1 { }
#mainSection2 { background-image: url(../imgs/main/bg_section02.png); }
#mainSection3 { background-image: url(../imgs/main/bg_section03.png); }
#mainSection4 { background-image: url(../imgs/main/bg_section04.png); }
#mainSection5 { background-image: url(../imgs/main/bg_section05.png); }
.section { background-repeat: no-repeat; background-position: center center; background-size: cover; }
.section::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.75); }
.section .fp-tableCell { position: relative; padding: 35px; }
.section .section_topheight { height: 75px; }
.section .btn_fp_prev { position: absolute; top: 75px; right: 0; left: 0; height: 1px; background: #000; color: #fff; font-size: 20px; line-height: 50px; font-weight: 700; text-align: center; overflow: hidden; opacity: 0.01; z-index: 50; }
.section .btn_fp_prev:focus { height: 50px; opacity: 1; }
.section .btn_fp_next { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #000; color: #fff; font-size: 20px; line-height: 50px; font-weight: 700; text-align: center; overflow: hidden; opacity: 0.01; z-index: 50; }
.section .btn_fp_next:focus { height: 50px; opacity: 1; }

.fp-responsive .section .fp-tableCell { padding-top: 120px; padding-bottom: 150px; }

.ma_videobox { position: absolute; top: 0; left: 0; width: 100%; min-height: 100vh; height: 100%; overflow: hidden; background: red; }
.ma_videobox::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.75); }
.ma_videobox .ma_video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; min-width: 100%; min-height: 100%; object-fit: cover; }
.ma_main { }
.ma_main .title { display: block; position: relative; z-index: 5; width: 480px; margin: 0 auto; color: #fff; font-size: 80px; line-height: 96px; text-align: center; font-family: Roboto; }
.ma_main .title .top { font-weight: 100; letter-spacing: 4.8px; }
.ma_main .title .middle { font-weight: 700; letter-spacing: 56px; }
.ma_main .title .bottom { font-weight: 300; letter-spacing: 22.8px; }
.ma_main .title_p { position: relative; z-index: 5; right: 50%; margin-top: 18px; padding: 0 25px; color: #fff; font-size: 18px; line-height: 28px; font-weight: 400; text-align: right; letter-spacing: -0.45px; }
/* .ma_main .btn_instagram { position: absolute; z-index: 5; bottom: 60px; left: 60px; padding-left: 60px; background: url(../imgs/main/ico_instagram_48.svg) no-repeat 0 center; color: #fff; font-size: 16px; line-height: 48px; font-weight: 400; letter-spacing: 0.48px; } */
/* 2022-07-13 정승훈 : UI 수정 */
.btn_instagram { position: fixed; z-index: 5; bottom: 42px; left: 60px; padding-left: 60px; background: url(../imgs/main/ico_instagram_48.png) no-repeat 0 center; color: #fff; font-size: 16px; line-height: 48px; font-weight: 400; letter-spacing: 0.48px; }
/* 2022-07-18 정승훈 : 인스타그램 스크롤 수정 및 footer 이미지 수정 */
/* 2022-08-01 정승훈 : 인스타그램 및 footer hover 처리 추가 */
.btn_instagram:focus,
.btn_instagram:hover {background: url(../imgs/main/ico_instagram_48_hover.png) no-repeat 0 center; text-decoration: underline;}
/* //2022-08-01 정승훈 : 인스타그램 및 footer hover 처리 추가 */
.btn_instagram.stop {position: absolute; bottom: 286px;}
.btn_instagram.off {display: none;}
/* //2022-07-18 정승훈 : 인스타그램 스크롤 수정 및 footer 이미지 수정 */
/* //2022-07-13 정승훈 : UI 수정 */
.ma_mu_f { max-width: 1250px; margin:0 auto; padding: 0 20px; }
.ma_mu_f .title { color: #fff; font-size: 30px; line-height: 44px; font-weight: 300; letter-spacing: -0.75px; text-align: right; }
.ma_mu_f .title strong { font-weight: 700; }
.ma_mu_f .title span { font-weight: 400; }
.ma_mu_f .title_p { margin-top: 20px; color: #fff; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.4px; text-align: right; }
.ma_mu_f .mu_f_swiper { position: relative; margin-top: 159px; border: 1px solid rgba(112,112,112,0.4); border-radius: 8px; }
.ma_mu_f .ctrl_box { display: block; position: absolute; bottom: 78px; left: 678px; width: 88px; z-index: 11; }
.ma_mu_f .ctrl_box:active { content: ''; display: block; clear: both; }
.ma_mu_f .ctrl_box .btn_stop_play { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border: none; background: url(../imgs/main/ico_white_stop_24.svg) no-repeat center center/contain; text-indent: -9999px; overflow: hidden; }
.ma_mu_f .ctrl_box .btn_stop_play.stop { background-image: url(../imgs/main/ico_white_play_24.svg); }
.ma_mu_f .ctrl_box .swiper-button-prev { float: left; position: static; width: 24px; height: 24px; margin: 0; border: none; background: url(../imgs/main/ico_white_prev_24.svg) no-repeat center center/contain; text-indent: -9999px; overflow: hidden; }
.ma_mu_f .ctrl_box .swiper-button-next { float: right; position: static; width: 24px; height: 24px; margin: 0; border: none; background: url(../imgs/main/ico_white_next_24.svg) no-repeat center center/contain; text-indent: -9999px; overflow: hidden; }
.ma_mu_f .swiper-container { margin-top: -130px }
.ma_mu_f .inbox { display: flex; padding-top: 62px; }
.ma_mu_f .inbox .imgbox { position: relative; margin-left: 79px; }
.ma_mu_f .inbox .imgbox::after { content:''; position: absolute; top: -62px; left: 50%; width: 196px; height: 137px; margin-left: -98px; background: url(../imgs/main/txt_MU_F.svg) no-repeat center center/contain; }
.ma_mu_f .inbox .imgbox .img { width: 599px; height: 342px; background-repeat: no-repeat; background-position: 0 center; background-size: auto 100%; }
.ma_mu_f .inbox .txtbox { flex: 1; margin-top: 200px; padding-right: 20px; padding-bottom: 130px; }
.ma_mu_f .inbox .txtbox .txt { color: #fff; font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: -0.45px; }
.ma_mu_f .swiper-pagination { display: flex; align-items: center; position: absolute; top: 78px; right: auto; bottom: auto; left: 678px; height: 24px; line-height: 24px; }
.ma_mu_f .swiper-pagination .swiper-pagination-bullet { width: 4px; height: 4px; margin: 0 12px 0 0; background: #fff; text-indent: -9999px; overflow: hidden; opacity: 1; transition: .2s; }
/* 2022-07-13 정승훈 : UI 수정 */
/* .ma_mu_f .swiper-pagination .swiper-pagination-bullet-active { width: 24px; height: 24px; border-radius: 0; background: url(../imgs/main/ico_music_line_24.svg) no-repeat center center/contain; } */
.ma_mu_f .swiper-pagination span:nth-child(1).swiper-pagination-bullet-active { width: 24px; height: 24px; border-radius: 0; background: url(../imgs/main/ico_music_line_25.png) no-repeat center center/contain; }
.ma_mu_f .swiper-pagination span:nth-child(2).swiper-pagination-bullet-active { width: 24px; height: 24px; border-radius: 0; background: url(../imgs/main/ico_music_line_26.png) no-repeat center center/contain; }
.ma_mu_f .swiper-pagination span:nth-child(3).swiper-pagination-bullet-active { width: 24px; height: 24px; border-radius: 0; background: url(../imgs/main/ico_music_line_24.svg) no-repeat center center/contain; }
/* //2022-07-13 정승훈 : UI 수정 */


.ma_program { position: relative; padding: 0 80px 70px 80px; }
.ma_program .title { color: #fff; font-size: 70px; line-height: 81px; font-weight: 700; letter-spacing: 3.85px; text-align: center; font-family: Roboto; }
.ma_program .title_p { padding-left: 5px; color: #fff; font-size: 28px; line-height: 36px; font-weight: 300; letter-spacing: 10.3px; text-align: center; font-family: Roboto; }
.ma_program .program_swiper { position: relative; max-width: 1250px; margin: 0 auto; padding-top: 80px; }
.ma_program .swiper-container { margin: 0 -14px; }
.ma_program .swiper-slide { width: 25%; padding: 0 14px; }
.ma_program .inbox { display: block; position: relative; outline: none; }
.ma_program .inbox .imgbox { position: relative; height: 1px; padding-bottom: 140.9%; overflow: hidden; }
.ma_program .inbox .imgbox::before { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:url(../imgs/main/bg_program_border_top.png) no-repeat center 0; background-size: 100%; z-index: 1; }
.ma_program .inbox .imgbox .img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 12px; background-repeat: no-repeat; background-position: center center; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 97%, 95% 100%, 5% 100%, 0 97%); }
.ma_program .inbox .txtbox { position: relative; height: 70px; margin-top: -1px; padding: 10px 24px 0; }
.ma_program .inbox .txtbox .tit { position: relative; z-index: 5; color: #000; font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.9px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ma_program .inbox .txtbox .txt { position: relative; z-index: 5; color: #d20de8; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ma_program .inbox .txtbox .bottom_box { display: flex; flex-direction: column; position: absolute; right: 0; bottom: 0; left: 0; height: 70px; }
.ma_program .inbox .txtbox .bottom_box .repeat { flex: 1; background:url(../imgs/main/bg_program_border_bottom01.png) no-repeat center 0; background-size: 100%; }
.ma_program .inbox .txtbox .bottom_box .repeat img { width: 100%; vertical-align: top; }
.ma_program .inbox .hoverbox { display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 10; visibility: hidden; opacity: 0; transition: .2s; }
.ma_program .inbox .hoverbox::before { content:''; position: absolute; top: 0; right: 0; bottom: 70px; left: 0; background:url(../imgs/main/bg_program_border_top_hover.png) no-repeat center 0; background-size: 100%; }
.ma_program .inbox .hoverbox::after { content: ''; position: absolute; right: 22px; bottom: 22px; width: 110px; height: 216px; background: url(../imgs/main/bg_program_hover_txt.svg) no-repeat center center/contain; }
.ma_program .inbox .hoverbox .bottom_box { display: flex; flex-direction: column; position: absolute; right: 0; bottom: 0; left: 0; height: 70px; }
.ma_program .inbox .hoverbox .bottom_box .repeat { flex: 1; background:url(../imgs/main/bg_program_border_bottom_hover01.png) no-repeat center 0; background-size: 100%; }
.ma_program .inbox .hoverbox .tag { position: relative; z-index: 5; color: #0eb48d; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.35px; }
.ma_program .inbox .hoverbox .tit { position: relative; z-index: 5; margin-top: 10px; color: #fff; font-size: 20px; line-height: 30px; font-weight: 400; letter-spacing: -0.5px; }
.ma_program .inbox .hoverbox .more { position: relative; z-index: 5; margin-top: 30px; padding: 0 50px 0 16px; border: 1px solid #0eb48d; border-radius: 18px; background: url(../imgs/main/ico_music_line_24.svg) no-repeat right 16px center; background-size: 24px; color: #0eb48d; font-size: 16px; line-height: 34px; font-weight: 500; letter-spacing: -0.8px; }
.ma_program .inbox:hover .hoverbox,
.ma_program .inbox:focus .hoverbox { visibility: visible; opacity: 1; }
.ma_program .swiper-button-prev { left: -125px; width: 80px; height: 80px; margin: 0; border: 1px solid #707070; border-radius: 100%; background: url(../imgs/main/ico_white_prev_40.svg) no-repeat center center rgba(0,0,0,0.8); background-size: 40px; text-indent: -9999px; overflow: hidden; }
.ma_program .swiper-button-next { right: -125px; width: 80px; height: 80px; margin: 0; border: 1px solid #707070; border-radius: 100%; background: url(../imgs/main/ico_white_next_40.svg) no-repeat center center rgba(0,0,0,0.8); background-size: 40px; text-indent: -9999px; overflow: hidden; }
.ma_program .program_swiper .btn_more { position: absolute; top: 18px; right: 0; border: 1px solid #707070; border-radius: 18px; padding: 0 35px 0 14px; background: url(../imgs/main/ico_white_plus_20.svg) no-repeat right 14px center rgba(15, 15, 15, 0.51); background-size: 20px; color: #fff; font-size: 14px; line-height: 34px; font-weight: 500; letter-spacing: -0.7px; }
.ma_program .scrollbar_wrap { position: absolute; right: -35px; bottom: 0; left: -35px; height: 23px; background: url(../imgs/main/bg_program_scrollbox_repeat.png) repeat-x center 0; }
.ma_program .swiper-scrollbar { max-width: 1250px; height: 108px; margin: -43px auto 0; border-radius: 0; background: none; }
.ma_program .swiper-scrollbar::before { content:''; position: absolute; top: 50%; left: 0; width: 4px; height: 34px; margin-top: -17px; background: #747474; }
.ma_program .swiper-scrollbar::after { content:''; position: absolute; top: 50%; right: 0; width: 4px; height: 34px; margin-top: -17px; background: #747474; }
.ma_program .swiper-scrollbar.first::before,
.ma_program .swiper-scrollbar.last::after { background: #0eb48d; }
.ma_program .swiper-scrollbar-drag { border-radius: 0; background: url(../imgs/main/img_ctrl_progress.png) no-repeat center 0; background-size: contain; }

.ma_contents { padding: 0 80px; }
.ma_contents .title { color: #fff; font-size: 70px; line-height: 81px; font-weight: 700; letter-spacing: 3.85px; text-align: center; font-family: Roboto; }
.ma_contents .title_p { padding-left: 8px; color: #fff; font-size: 28px; line-height: 36px; font-weight: 300; letter-spacing: 12.04px; text-align: center; font-family: Roboto; }
.ma_contents .contents_swiper { position: relative; max-width: 1250px; margin: 0 auto; padding: 99px 0 28px; }
.ma_contents .swiper-container { margin: 0 -15px; }
.ma_contents .swiper-slide { width: 25%; padding: 0 15px; }
.ma_contents .inbox { display: block; position: relative; outline: none; }
.ma_contents .inbox .imgbox { position: relative; height: 0; padding-bottom: 100%; }
.ma_contents .inbox .imgbox .img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.ma_contents .inbox .imgbox::before { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(15,15,15,0.6); z-index: 1; visibility: hidden; opacity: 0; transition: .5s; }
.ma_contents .inbox .imgbox::after { content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(../imgs/main/img_contents_hover.png) no-repeat center center/96.5%; z-index: 1; visibility: hidden; opacity: 0; transition: .5s; }
.ma_contents .inbox:hover .imgbox::before,
.ma_contents .inbox:focus .imgbox::before { visibility: visible; opacity:1; }
.ma_contents .inbox:hover .imgbox::after,
.ma_contents .inbox:focus .imgbox::after { visibility: visible; opacity:1; animation: macontrotate 1s linear infinite; }
@keyframes macontrotate {
    from { transform: rotate(0); }

    to { transform: rotate(360deg); }
}
.ma_contents .inbox .txtbox { padding-top: 15px; }
.ma_contents .inbox .txtbox .tit { color: #fff; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -0.45px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ma_contents .inbox .txtbox .txt { margin-top: 10px; color: #fff; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.ma_contents .swiper-button-prev { left: -125px; width: 80px; height: 80px; margin: -40px 0 0 0; border: 1px solid #707070; border-radius: 100%; background: url(../imgs/main/ico_white_prev_40.svg) no-repeat center center rgba(0,0,0,0.8); background-size: 40px; text-indent: -9999px; overflow: hidden; }
.ma_contents .swiper-button-next { right: -125px; width: 80px; height: 80px; margin: -40px 0 0 0; border: 1px solid #707070; border-radius: 100%; background: url(../imgs/main/ico_white_next_40.svg) no-repeat center center rgba(0,0,0,0.8); background-size: 40px; text-indent: -9999px; overflow: hidden; }
.ma_contents .contents_swiper .btn_more { position: absolute; top: 18px; right: 0; border: 1px solid #707070; border-radius: 18px; padding: 0 35px 0 14px; background: url(../imgs/main/ico_white_plus_20.svg) no-repeat right 14px center rgba(15, 15, 15, 0.51); background-size: 20px; color: #fff; font-size: 14px; line-height: 34px; font-weight: 500; letter-spacing: -0.7px; }

.ma_community { padding-bottom: 75px; }
.ma_community .title { color: #fff; font-size: 70px; line-height: 81px; font-weight: 700; letter-spacing: 3.85px; text-align: center; font-family: Roboto; }
.ma_community .community_flex {/* display: flex;*/ max-width: 1250px; margin: 0 auto; }
.ma_community .community_flex .cf_item { position: relative; margin-top: 33px; }
.ma_community .community_flex .cf_item + .cf_item { flex: 1; margin-left: 70px; }
.ma_community .community_flex .cf_tit { color: #fff; font-size: 24px; line-height: 36px; font-weight: 700; letter-spacing: -1.2px; }
.ma_community .community_flex .cf_con { margin-top: 14px; }
.ma_community .ma_mapbox { width: 590px; height: 404px; }
.ma_community .ma_mapbox .mapbox { height: 344px; border: 4px solid #fff; border-radius: 8px 8px 0 0; }
.ma_community .ma_mapbox .txtbox { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; border-radius: 0 0 8px 8px; background: #fff; }
.ma_community .ma_mapbox .txtbox p { color: #0f0f0f; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.8px; }
.ma_community .ma_mapbox .txtbox .tel { padding: 0 16px 0 43px; border-radius: 16px;; background: url(../imgs/main/ico_white_tel_24.svg) no-repeat 15px center #0eae88; background-size: 24px; color: #fff; font-size: 16px; line-height: 32px; font-weight: 400; letter-spacing: -0.8px; }
.ma_community .root_daum_roughmap { width: 100% !important; }
.ma_community .root_daum_roughmap .wrap_controllers { display: none; }
.ma_community .root_daum_roughmap .wrap_btn_zoom button:focus span { box-shadow: 0 0 2px 2px rgba(0,0,0,0.75); }
.ma_community .ma_notice li + li { margin-top: 8px; }
.ma_community .ma_notice li .inbox { display: block; position: relative; height: 120px; padding: 18px 23px; border: 2px solid transparent; border-radius: 8px; transition: .2s; }
.ma_community .ma_notice li .inbox .subject { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 56px; overflow: hidden; color: #fff; font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: -0.9px; transition: .2s; }
.ma_community .ma_notice li .inbox .date { position: absolute; right: 23px; bottom: 18px; color: #fff; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0.42px; transition: .2s; }
.ma_community .ma_notice li .line { height: 1px; margin-top: 8px; background: #707070; transition: .2s; }
.ma_community .community_flex .btn_more { position: absolute; top: 0; right: 0; border: 1px solid #707070; border-radius: 18px; padding: 0 35px 0 14px; background: url(../imgs/main/ico_white_plus_20.svg) no-repeat right 14px center rgba(15, 15, 15, 0.51); background-size: 20px; color: #fff; font-size: 14px; line-height: 34px; font-weight: 500; letter-spacing: -0.7px; }

.ma_community .ma_notice li .inbox:hover,
.ma_community .ma_notice li .inbox:focus { border-color: #0eb48d; background: rgba(0,0,0,0.4); }
.ma_community .ma_notice li .inbox:hover .subject,
.ma_community .ma_notice li .inbox:focus .subject { color: #0eb48d; font-weight: 700; }
.ma_community .ma_notice li .inbox:hover .date,
.ma_community .ma_notice li .inbox:focus .date { color: #0eb48d; letter-spacing: 0.48px; }
/* .ma_community .ma_notice li .inbox:hover + .line,
.ma_community .ma_notice li .inbox:focus + .line { background: transparent; } */

.ma_footbn_wrap { position: absolute; right: 0; bottom: 0; left: 0; padding: 0 35px; background: rgba(0,0,0,0.6); }

.ma_footbn { position: relative; max-width: 1250px; height: 110px; padding-left: 175px; margin: 0 auto; }
.ma_footbn .ctrl_box { display: block; position: absolute; top: 50%; left: 0; width: 88px; margin-top: -12px; }
.ma_footbn .ctrl_box::after { content: ''; display: block; clear: both; }
.ma_footbn .ctrl_box .btn_stop_play { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border: none; background: url(../imgs/main/ico_white_stop_24.svg) no-repeat center center/contain; text-indent: -9999px; overflow: hidden; }
.ma_footbn .ctrl_box .btn_stop_play.stop { background: url(../imgs/main/ico_white_play_24.svg) no-repeat center center; }
.ma_footbn .ctrl_box .swiper-button-prev { float: left; position: static; width: 24px; height: 24px; margin: 0; border: none; background: url(../imgs/main/ico_white_prev_24.svg) no-repeat center center/contain; text-indent: -9999px; overflow: hidden; }
.ma_footbn .ctrl_box .swiper-button-next { float: right; position: static; width: 24px; height: 24px; margin: 0; border: none; background: url(../imgs/main/ico_white_next_24.svg) no-repeat center center/contain; text-indent: -9999px; overflow: hidden; }

.ma_footbn .swiper-container { height: 100%; }
.ma_footbn .swiper-slide { width: 205px; padding: 30px 35px 30px 5px; padding-right: 40px; padding-top: 30px; padding-bottom: 30px; }
.ma_footbn .swiper-slide a { display:block; width: 165px; height: 50px; background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -9999px; overflow: hidden; }

#maFooter::before { background: transparent; }
#maFooter .fp-tableCell { padding: 0; }
#maFooter .btn_fp_prev { top: 0; }

@media screen and (max-width:1800px){
    .ma_program .swiper-button-prev { left: -70px; }
    .ma_program .swiper-button-next { right: -70px; }
    .ma_contents .swiper-button-prev { left: -35px; }
    .ma_contents .swiper-button-next { right: -35px; }
}

@media screen and (max-width:1600px){
    .main_menu { right: 16px; }
}

@media screen and (max-width:1500px){
    .main_menu { right: 16px; }

    .ma_community .community_flex .cf_item + .cf_item { margin-left: 20px; }
}

@media screen and (max-width:1460px){
    .main_menu { right: 16px; }

    .ma_community { padding-right: 70px; }
}

@media screen and (max-width:1280px){
    .main_menu li a .txt { transition: 0s; }
    .main_menu li.active a .txt { width: 8px; height: 8px; padding:0; color: rgba(0,0,0,0.01); font-size: 1px; transition: 0s; }

    .scroll_intro { right: 35px; bottom: 35px; }

    .ma_main .btn_instagram { bottom: 40px; left: 35px; }

    .ma_mu_f .ctrl_box { left: 619px; }
    .ma_mu_f .inbox .imgbox { margin-left: 20px; }
    .ma_mu_f .inbox .txtbox .txt { word-break: keep-all; }
    .ma_mu_f .inbox .txtbox .txt br { display: none; }

    .ma_program { padding-right: 35px; padding-left: 35px; }

    .ma_contents { padding-right: 35px; padding-left: 35px; }

    .ma_community { padding-right: 0; }
}

@media screen and (max-width:1024px){
    .section .btn_fp_prev,
    .section .btn_fp_next { display: none; }

    .fp-responsive .section .fp-tableCell { padding-top: 150px; padding-bottom: 150px; }

    .section .section_topheight { height: 0; }

    .scroll_intro.down { display: none !important; }
    .scroll_intro.up { right: 20px; bottom: 100px; }

    .main_menu { line-height: 6px; }
    .main_menu li a .txt { width: 6px; min-width: 6px; height: 6px; }
    .main_menu li a .txt::before { width: 6px; height: 6px; border-radius: 3px; }
    .main_menu li.active a .txt { width: 6px; height: 6px; }

    #mainSection2 { background-image: url(../imgs/main/bg_section02_t.png); }
    #mainSection3 { background-image: url(../imgs/main/bg_section03_t.png); }
    #mainSection4 { background-image: url(../imgs/main/bg_section04_t.png); }
    #mainSection5 { background-image: url(../imgs/main/bg_section05_t.png); }

    .ma_main .title_p { margin-top: 38px; padding: 0 }

    .ma_mu_f { padding: 0; }
    .ma_mu_f .title { font-size: 24px; line-height: 35px; letter-spacing: -0.6px; }
    .ma_mu_f .title_p { margin-top: 22px; }
    .ma_mu_f .mu_f_swiper { margin-top: 57px; padding: 0 75px; border: none; }
    .ma_mu_f .swiper-container { margin-top: 0; }
    .ma_mu_f .inbox { flex-direction: column; }
    .ma_mu_f .inbox .imgbox { width: 100%; margin-left: 0; }
    .ma_mu_f .inbox .txtbox { flex: auto; width: 100%; margin-top: 84px; padding-right: 0; padding-bottom: 55px; }
    .ma_mu_f .inbox .txtbox .txt br { display: block; }
    .ma_mu_f .ctrl_box { bottom: 0; left: 75px; }
    .ma_mu_f .swiper-pagination { top: 434px; left: 75px; }

    .ma_program { padding: 0 0 116px 0; }
    .ma_program .program_swiper { padding-top: 145px; margin: 0 35px; }
    .ma_program .swiper-container { margin: 0 -10px; }
    .ma_program .swiper-slide { width: 33.3333%; padding: 0 10px; }
    .ma_program .inbox .txtbox { height: 48px; padding: 2px 15px; }
    .ma_program .inbox .txtbox .tit { font-size: 16px; line-height: 24px; letter-spacing: -0.8px; }
    .ma_program .inbox .txtbox .txt { font-size: 13px; line-height: 19px; letter-spacing: -0.65px; }
    .ma_program .inbox .txtbox .bottom_box { height: 48px; }
    .ma_program .inbox .hoverbox { display: none !important; }
    .ma_program .swiper-button-prev,
    .ma_program .swiper-button-next { width: 60px; height: 60px; margin-top: 42px; }
    .ma_program .scrollbar_wrap { padding: 0 35px; }
    .ma_program .program_swiper .btn_more { top: 49px; right: 50%; transform: translateX(50%); }

    .ma_contents { }
    .ma_contents .swiper-container { margin: 0 -10px; }
    .ma_contents .contents_swiper { padding: 145px 0 0 0; }
    .ma_contents .contents_swiper .btn_more { top: 49px; right: 50%; transform: translateX(50%); }
    .ma_contents .swiper-slide { width: 33.3333%; padding: 0 10px; }
    .ma_contents .swiper-button-prev,
    .ma_contents .swiper-button-next { width: 60px; height: 60px; margin-top: 5px; }
    .ma_contents .inbox .txtbox { padding-top: 10px; }
    .ma_contents .inbox .txtbox .txt { margin-top: 5px; }

    .ma_community { padding-bottom: 20px; }
    .ma_community .title { font-size: 56px; line-height: 74px; letter-spacing: 3.08px; }
    .ma_community .community_flex { flex-direction: column; }
    .ma_community .community_flex .cf_item { width: 100%; margin-top: 60px; }
    .ma_community .community_flex .cf_item + .cf_item { flex: auto; margin-left: 0; }
    .ma_community .ma_mapbox { width: 100%; height: 457px; }
    .ma_community .ma_mapbox .mapbox { height: 389px; }
    .ma_community .root_daum_roughmap { height: 100% !important; }
    .ma_community .root_daum_roughmap .wrap_map { height: 100% !important; }
    .ma_community .ma_mapbox .txtbox { height: 68px; padding: 0 25px; }
    .ma_community .ma_mapbox .txtbox p { font-size: 18px; line-height: 26px; letter-spacing: -0.9px; }
    .ma_community .ma_mapbox .txtbox .tel { border-radius: 18px; font-size: 18px; line-height: 36px; letter-spacing: -0.9px; }
    .ma_community .ma_notice { border-top: 1px solid #707070; padding-top: 8px; }
    .ma_community .ma_notice li .inbox .date { bottom: 15px; }
    /* 2022-08-03 정승훈 :  인스타그램 및 footer 메뉴 ui 수정 */
.btn_instagram { bottom: 20px; left: 35px;}
    /* //2022-08-03 정승훈 :  인스타그램 및 footer 메뉴 ui 수정 */

}

@media screen and (max-width:767px){
    .section .fp-tableCell { padding: 90px 12px; }

    .scroll_intro.up { bottom: 218px; }

    .main_menu { right: 4px; }
    .main_menu li + li { margin-top: 10px; }
    .main_menu li a .txt { width: 4px; min-width: 4px; height: 4px; border-radius: 2px; }
    .main_menu li a .txt::before { width: 4px; height: 4px; border-radius: 2px; }
    .main_menu li.active a .txt { width: 4px; height: 4px; }

    #mainSection2 { background-image: url(../imgs/main/bg_section02_m.png); }
    #mainSection3 { background-image: url(../imgs/main/bg_section03_m.png); }
    #mainSection4 { background-image: url(../imgs/main/bg_section04_m.png); }
    #mainSection5 { background-image: url(../imgs/main/bg_section05_m.png); }

    .ma_main .title { width: 250px; font-size: 34px; line-height: 55px; }
    .ma_main .title .top { letter-spacing: 2.04px; padding-left: 2px; }
    .ma_main .title .middle { letter-spacing: 23.8px; padding-left: 24px; }
    .ma_main .title .bottom { letter-spacing: 9.69px; padding-left: 9.69px; }
    .ma_main .title_p { right: auto; width: 280px; margin: 30px auto 0; font-size: 14px; line-height: 24px; letter-spacing: -0.35px; text-align: center; }
    .ma_main .btn_instagram { bottom: 40px; left: 12px; padding-left: 44px; background-size: 36px;; font-size: 14px; line-height: 36px; letter-spacing: 0.42px; }

    .ma_mu_f .title { font-size: 18px; line-height: 26px; letter-spacing: -0.45px; }
    .ma_mu_f .title_p { margin-top: 12px; font-size: 12px; line-height: 20px; letter-spacing: -0.3px; }
    .ma_mu_f .mu_f_swiper { margin-top: 30px; padding: 0; }
    .ma_mu_f .ctrl_box { left: 0; width: 66px; }
    .ma_mu_f .ctrl_box .btn_stop_play { width: 18px; height: 18px; margin-left: -9px; }
    .ma_mu_f .ctrl_box .swiper-button-prev { width: 18px; height: 18px; }
    .ma_mu_f .ctrl_box .swiper-button-next { width: 18px; height: 18px; }
    .ma_mu_f .inbox { padding-top: 35px; }
    .ma_mu_f .inbox .imgbox .img { width: 100%; height: 185px; }
    .ma_mu_f .inbox .imgbox::after { top:-35px; left: 59px; width: 107px; height: 75px; margin: 0; }
    .ma_mu_f .inbox .txtbox { margin-top: 58px; padding-bottom: 38px; }
    .ma_mu_f .inbox .txtbox .txt { font-size: 13px; line-height: 24px; letter-spacing: -0.65px; }
    .ma_mu_f .swiper-pagination { top: 240px; left: 0; height: 18px; line-height: 18px; }
    .ma_mu_f .swiper-pagination .swiper-pagination-bullet-active { width: 18px; height: 18px; }

    .ma_program { padding-bottom: 0; }
    .ma_program .title { padding-left: 2px; font-size: 42px; line-height: 48px; letter-spacing: 2.3px; }
    .ma_program .title_p { padding-left: 6px; font-size: 16px; line-height: 22px; letter-spacing: 6.2px; }
    .ma_program .program_swiper { padding-top: 85px; margin: 0 10px; }
    .ma_program .swiper-slide { width: 50%; }
    .ma_program .swiper-button-prev { left: 0; width: 40px; height: 40px; margin-top: 20px; background-size: 20px; }
    .ma_program .swiper-button-next { right: 0; width: 40px; height: 40px; margin-top: 20px; background-size: 20px; }
    .ma_program .scrollbar_wrap { display: none; }
    .ma_program .program_swiper .btn_more { top: 25px; line-height: 28px; }

    .ma_contents { padding: 0; }
    .ma_contents .title { padding-left: 2px; font-size: 42px; line-height: 48px; letter-spacing: 2.3px; }
    .ma_contents .title_p { padding-left: 7px; font-size: 16px; line-height: 22px; letter-spacing: 7.2px; }
    .ma_contents .contents_swiper { padding-top: 85px; margin: 0 10px; }
    .ma_contents .swiper-slide { width: 50%; }
    .ma_contents .swiper-button-prev { left: 0; width: 40px; height: 40px; margin-top: -15px; background-size: 20px; }
    .ma_contents .swiper-button-next { right: 0; width: 40px; height: 40px; margin-top: -15px; background-size: 20px; }
    .ma_contents .contents_swiper .btn_more { top: 25px; line-height: 28px; }
    .ma_contents .inbox .txtbox { padding-top: 15px; }

    .ma_community { padding-bottom: 0; }
    .ma_community .title { font-size: 37px; line-height: 48px; letter-spacing: 2.04px; }
    .ma_community .community_flex .cf_item { margin-top: 30px; padding-bottom: 20px; }
    .ma_community .community_flex .cf_tit { font-size: 18px; line-height: 30px; letter-spacing: -0.9px; }
    .ma_community .community_flex .cf_con { margin-top: 18px; }
    .ma_community .ma_mapbox { height: 254px; }
    .ma_community .ma_mapbox .mapbox { height: 188px; }
    .ma_community .ma_mapbox .txtbox { flex-direction: column; align-items: flex-end; height: 66px; padding: 7px 12px; }
    .ma_community .ma_mapbox .txtbox p { width: 100%; font-size: 12px; line-height: 17px; letter-spacing: -0.6px; text-align: left; }
    .ma_community .ma_mapbox .txtbox .tel { margin-top: 10px; padding: 0 11px 0 26px; background-position: 8px center; background-size: 18px; border-radius: 12px; font-size: 12px; line-height: 24px; letter-spacing: -0.6px; }
    .ma_community .community_flex .btn_more { padding: 0 30px 0 10px; background-position: right 10px center; line-height: 28px; }
    .ma_community .ma_notice li .inbox { height: 100px; padding: 12px 18px; }
    .ma_community .ma_notice li .inbox .subject { font-size: 16px; line-height: 28px; }
    .ma_community .ma_notice li .inbox .date { right: 18px; bottom: 7px; }
    .ma_footbn_wrap { padding: 0; }
    .ma_footbn { margin: 0 12px; padding-left: 113px; }
    /* 2022-08-03 정승훈 :  인스타그램 및 footer 메뉴 ui 수정 */
    .btn_instagram { bottom: 15px; left: 12px; width: 32px;height: 32px; background-size: contain; line-height: 32px; padding-left: 40px; font-size:1.4rem;}
    .btn_instagram:focus,
    .btn_instagram:hover {background-size: contain;}
    /*//2022-08-03 정승훈 :  인스타그램 및 footer 메뉴 ui 수정 */
}

@media screen and (max-width:640px){
    .ma_program .program_swiper { margin: 0; }
    .ma_program .swiper-container { margin: 0; }
    .ma_program .swiper-slide { width: 100%; padding: 0 70px; }

    .ma_contents .contents_swiper { margin: 0; }
    .ma_contents .swiper-container { margin: 0; }
    .ma_contents .swiper-slide { width: 100%; padding: 0 50px; }
}

/*------------------------------------------------------------------------------
    @팝업
------------------------------------------------------------------------------*/
.btn_view_pop { display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0.01; text-indent: -999px; overflow: hidden; }
.main_notice_pop { display: none; position: absolute; top: 0; left: 0; /*width: 100%; max-width: 400px;*/ margin-top:75px; z-index: 9999; outline: none; }
.main_notice_pop .mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); }
.main_notice_pop .pop_con { display:inline-block; position: relative; overflow: hidden; outline: none; }
.main_notice_pop:focus .pop_con { box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.6); }
.main_notice_pop .pop_con .ico_close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: none; background-color: rgba(0, 0, 0, 0.5); background-repeat: no-repeat; background-position: center center; background-size: 24px; text-indent: -9999px; overflow: hidden; z-index: 1; }
.main_notice_pop .pop_con .img {}
.main_notice_pop .pop_con .img img { max-width: 100%; }
.main_notice_pop .pop_con .btns { display: flex; justify-content: space-between; padding: 8px; background: #212121; }
.main_notice_pop .pop_con .btns .btn_invisible { display: flex; align-items: center; color: #fff; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.35px; }
.main_notice_pop .pop_con .btns .btn_invisible input[type="checkbox"] { margin: 0 4px 0 0; width: 15px; height: 15px; border: none; border-radius: 0; vertical-align: middle; }
.main_notice_pop .pop_con .btns .btn_close { padding: 0; margin: 0; border: none; background: none; color: #fff; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.7px; }
.pop_padding {padding:30px;}

@media screen and (max-width:1024px) {
    .main_notice_pop { margin-top: 85px; }
}

@media screen and (min-width:768px){
    .main_notice_pop {margin-left:0 !important;}
}

@media screen and (max-width:767px){
    /* .main_notice_pop { top: 124px; top:0 !important; left: 12px; left:50% !important; right: 12px; width: auto; } */
    .main_notice_pop { margin-top:124px !important; left:50% !important; width: auto; }
}

@media screen and (max-width:640px) {
    .main_notice_pop {right:10%; left:10% !important; margin-left:0 !important;}
    .main_notice_pop img {width:100%;}
}

#slide-pop {position:relative; z-index:99; overflow:hidden; text-align:center; transition:all 0.3s;}
#slide-pop.show {overflow:visible;}
#slide-pop img {vertical-align:top; width:100%; height:100%; max-width:100%;}
#slide-pop > a {display:table; width:100%; height:40px; padding:8px; background-color:#0eb48d; transition:all 0.3s;}
#slide-pop > a > span {display:table-cell; vertical-align:middle; font-size:0;}
#slide-pop > a > span > i {display:inline-block; vertical-align:top; margin-right:5px; font-size:1.5rem; color:#fff;}
#slide-pop > a > span > b {display:inline-block; vertical-align:top; margin-right:5px; font-weight:700; font-size:1.25rem; line-height:1.2; letter-spacing:-0.025em; color:#ef59a1;}
#slide-pop > a > span > span {display:inline-block; vertical-align:top; font-weight:700; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#fff;}
#slide-pop > div {position:absolute; top:100%; right:0; left:0; padding:12px 18px 15px 18px; background-color:rgba(0,0,0,0.7);}
#slide-pop .slide-pop-upr {position:relative; margin-bottom:12px;}
#slide-pop .slide-pop-upr > p {}
#slide-pop .slide-pop-upr > p > span {display:inline-block; vertical-align:top; font-weight:700; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#fff;}
#slide-pop .slide-pop-upr > p > i {display:inline-block; vertical-align:top; margin-right:5px; font-size:1.5rem; color:#fff;}
#slide-pop .slide-pop-inr {}
#slide-pop .pop-slider {margin:0 auto;}
#slide-pop .pop-slider.swiper-container {}
#slide-pop .pop-slider .swiper-wrapper {}
#slide-pop .pop-slider .swiper-slide {}
#slide-pop .pop-slider .swiper-slide a {display:block;}
#slide-pop .pop-slider .swiper-slide .cont {overflow:hidden; border-radius:10px; background-color:#fff;}
#slide-pop .pop-slider .swiper-slide .cont > div {overflow:auto; max-height:100%; padding:15px; font-weight:400; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#212121;}
#slide-pop .pop-slider .swiper-slide .cont > div * {font-weight:400; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#212121;}
#slide-pop .pop-slider .swiper-slide .tit {display:block; overflow:hidden; margin-top:8px; white-space:nowrap; text-overflow:ellipsis; font-weight:500; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#fff;}
#slide-pop .pop-slider-controller {position:absolute; top:0; right:0; left:0; text-align:right;}
#slide-pop .swiper-pagination {float:left; font-weight:700; font-size:1rem; line-height:1.5; letter-spacing:-0.05em; color:#fff;}
#slide-pop .swiper-pagination .swiper-pagination-current {color:#ef59a1;}
#slide-pop .swiper-pagination .swiper-pagination-total {opacity:1;}
#slide-pop .swiper-pagination .swiper-pagination-total::before {opacity:0.5; border-color:#fff;}
#slide-pop .swiper-button-prev {/*background-image:url(../imgs/main/ico_banner-prev_w.png);*/ color:#fff;}
#slide-pop .swiper-button-next {/*background-image:url(../imgs/main/ico_banner-next_w.png);*/ color:#fff;}
#slide-pop .swiper-button-pause {color:#fff;}

@media screen and (min-width:1281px) {
	#slide-pop {position:absolute; top:243px; right:0; overflow:visible; border-radius:10px 0 0 10px;}
	#slide-pop > a {position:absolute; top:0; right:100%; width:80px; height:80px; padding:0; margin-right:18px; border-radius:50%; box-shadow:0 3px 6px 0 rgba(0,0,0,0.2);}
	#slide-pop > a > span > span {display:block; margin-right:0; font-weight:700; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#fff;}
	#slide-pop > div {position:static; border-radius:10px 0 0 10px;}
    #slide-pop .slide-pop-upr > p {text-align:left;}
    #slide-pop .slide-pop-upr > p > span {font-weight:700; font-size:1rem; line-height:1.5; letter-spacing:-0.025em; color:#fff;}
    #slide-pop .pop-slider-controller {left:auto;}
    #slide-pop .swiper-pagination {float:none;}
	#slide-pop.show > a {width:48px; height:48px; margin-right:8px; box-shadow:none;}
	#slide-pop.show > a > span > i {margin-right:0; font-size:1.625rem;}
	#slide-pop.show > a > span > b {display:none;}
	#slide-pop.show > a > span > span {display:none;}
}

@media screen and (max-width:767px) {
    #slide-pop .pop-slider {width:270px !important;}
	#slide-pop .pop-slider .cont {width:270px !important; height:401px !important;}
}