@charset "utf-8";

/* ==========================================================================
   MAIN VISUAL
   ========================================================================== */
.main_visual{position:relative; background:#fff; overflow:hidden}
.main_visual .swiper-wrapper{transition-timing-function:ease-in-out}
.main_visual .vis{width:100%; height:100vh; height: calc(var(--vh, 1vh) * 100); -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-perspective: 2000;}
.main_visual .vis .bg{width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover}
.main_visual .vis1 .bg{background-image:url('../images/show/mvis1.jpg'); animation: move1 13s ease-in-out forwards}
.main_visual .vis2 .bg{background-image:url('../images/show/mvis2.jpg'); animation: move2 13s ease-in-out forwards}
.main_visual .vis3 .bg{background-image:url('../images/show/mvis3.jpg'); animation: move2 13s ease-in-out forwards}
.main_visual .mvis_text{position:absolute; top:0; left:0; width:100%; height: 100%;}
.main_visual .mvis_text .wrap_text{display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; text-align: center;}
.main_visual .mvis_text .txt_en{font-family:'Roboto', sans-serif; font-size: 12px; font-weight: bold; color: var(--main-gold2); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px;}
.main_visual .mvis_text .main_text{font-size:52px; color:#fff; line-height: 60px;}
.main_visual .mvis_text .info_txt{font-family:'Roboto', sans-serif; font-size: 20px; font-weight: 300; color: #fff; letter-spacing: 0; margin-top: 18px;}
.main_visual .mvis_text .btn_scroll{margin-top: 30px;}
.main_visual .mvis_text .btn_scroll a{display: flex; justify-content: center; align-items: center; width: 78px; height: 78px; background-color: #009b63; border-radius: 39px; font-weight: bold; color: #fff; letter-spacing: 0;}
/* Swiper */
.main_visual .mvis.swiper-container-horizontal>.swiper-pagination-bullets{left: auto; bottom: 80px; right: 54px; width:auto}
.main_visual .mvis.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 6px}
.main_visual .mvis .swiper-pagination-bullet{width:14px; height:14px; border:1px solid #fff; background-color:transparent; opacity:1; outline:none; box-sizing: border-box;}
.main_visual .mvis .swiper-pagination-bullet-active{background-color: #fff;}
.main_visual .mvis .swiper-pagination-bullet:hover,
.main_visual .mvis .swiper-pagination-bullet:focus{outline:none}
.main_visual .mvis .swiper-button-next,
.main_visual .mvis .swiper-button-prev{bottom:22px; width: 50px; height: 50px; background-repeat:no-repeat; margin-top: -25px; background-size:42px auto; box-sizing:border-box; transition:ease-in-out .2s}
.main_visual .mvis .swiper-button-next:after,
.main_visual .mvis .swiper-button-prev:after{content:""}
.main_visual .mvis .swiper-button-prev{left: var(--main_gap1); background-image:url('../images/common/arw2_1.png'); background-position: left center}
.main_visual .mvis .swiper-button-next{right: var(--main_gap1);  background-image:url('../images/common/arw2_2.png'); background-position: right center}
.main_visual .mvis .swiper-button-next:hover,
.main_visual .mvis .swiper-button-next:focus,
.main_visual .mvis .swiper-button-prev:hover, 
.main_visual .mvis .swiper-button-prev:focus{outline:none}

#next_show{position: absolute; left: var(--main_gap1); bottom: 77px; width: 174px; height: 224px; padding: 10px 10px 0; background-color: #fff; box-sizing: border-box; z-index: 100;}
#next_show > a{display: block; width: 100%; height: 100%;}
#next_show .info_show{font-family:'Roboto', sans-serif; font-weight: bold; letter-spacing: 0; margin-top: 13px;}
#next_show .info_show .tit_next{background: url('../images/common/arw1.png') no-repeat right center; background-size: 15px auto;}
#next_show .info_show .date{font-size: 12px; color: var(--main-gold2); margin-top: 7px;}


/*애니메이션 Move*/
@keyframes move1
{  
    from {transform:scale(1)}  
    to {transform:scale(1.15)}
}
@keyframes move2
{  
    from {transform:scale(1.15)}  
    to {transform:scale(1)}
}

/* ==========================================================================
   MAIN CONTENTS
   ========================================================================== */
/*COMMON*/
.sec_title{text-align:center; letter-spacing: 0.5px;}
.sec_title .sub_text{font-family: 'Roboto Condensed', sans-serif; font-size: 12px; font-weight: bold; color: var(--main-gold2); text-transform: uppercase; margin-bottom: 2px;}
.sec_title .title{font-size: 36px; font-weight: 300; line-height:46px; text-transform: uppercase;}
.sec_title p{margin-top:12px; color: #222; line-height: 24px;}

/*섹션1 : 공연정보*/
#section1{position:relative; padding-top: 92px; padding-bottom: 74px}
#section1 .sec_ct{display: flex; justify-content: space-between; margin-top: 50px;}
#section1 .txt_show{width: 610px; padding-top: 40px; border-top: 1px solid #222;}
#section1 .txt_show .title{font-size: 42px; font-weight: 400; line-height: 50px;}
#section1 .txt_show .info_show{margin-top: 25px;}
#section1 .txt_show .info_show > ul > li{display: flex; line-height: 32px;}
#section1 .txt_show .info_show .item{width: 110px; color: var(--main-gold2);}
#section1 .txt_show .info_show .item::before{content: "- ";}
#section1 .txt_show .info_show .vl{flex: 1;}
#section1 .txt_show .info_show .vl a{font-family:'Roboto', sans-serif; font-weight: bold;}
#section1 .txt_show .btn_dw a{display: flex; justify-content: center; align-items: center; height: 38px; width: 206px;  border:1px solid var(--main-gold2); background-color: var(--main-gold2); border-radius: 20px; transition: .5s; margin-top: 22px;}
#section1 .txt_show .btn_dw span{display: inline-block; font-weight: 700; color: #fff; line-height: 28px; padding-right: 28px; background: url('../images/common/ico_file1.png') no-repeat right calc(50% + 2px); background-size: 18px auto;}
#section1 .txt_show .program_show{display: flex; padding-top: 36px; border-top: 1px solid #ebebeb; margin-top: 36px;}
#section1 .txt_show .program_show .tit_pro{width: 110px; font-family:'Roboto', sans-serif; font-size: 14px; font-weight: bold; color: #bbb; line-height: 24px;letter-spacing: 0;}
#section1 .txt_show .program_show .ct_pro{flex: 1;}
#section1 .txt_show .program_show .ct_pro > div{display: flex; margin-bottom: 10px;}
#section1 .txt_show .program_show .ct_pro .num_ch{width: 40px; font-weight: bold; color: var(--main-gold2); line-height: 24px;}
#section1 .txt_show .program_show .ct_pro > div > ul > li{margin-bottom: 8px;}
#section1 .txt_show .program_show .ct_pro .txt1{font-weight: bold; line-height: 24px;}
#section1 .txt_show .program_show .ct_pro .txt2{font-size: 14px; line-height: 22px; padding-left: 20px; margin-top: 10px; word-break: keep-all;}
#section1 .txt_show .program_show .ct_pro .txt2 span{font-weight: 400; margin-right: 6px;}
#section1 .txt_show .program_show .ct_pro .txt2 strong{font-weight: 400; color: var(--main-gold2);}
#section1 .images_show{width: 720px;}
#section1 .images_show .show_img{position:relative; padding-bottom:40px;}
#section1 .images_show .show_img .swiper-slide{-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;}
#section1 .images_show .show_img.swiper-container-horizontal>.swiper-pagination-bullets{bottom:0}
#section1 .images_show .show_img.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}
#section1 .images_show .show_img .swiper-pagination-bullet{width:12px; height:12px; border: 1px solid var(--main-gold2); background-color: transparent; opacity:1}
#section1 .images_show .show_img .swiper-pagination-bullet-active{background-color: var(--main-gold2)}

/*섹션2 : 출연진정보*/
#section2{position:relative; padding-top: 112px; padding-bottom: 87px; background: url('../images/main/bg_pattern1.png') repeat center; background-size: 23px auto;}
#section2 .list_member{margin-top: 77px;}
#section2 .list_member > ul{display: flex; flex-wrap: wrap;}
#section2 .list_member > ul > li{width :50%; display: flex; flex-wrap: wrap; margin-bottom: 100px;}
#section2 .list_member .thumb{width: 210px;}
#section2 .list_member .thumb img{border: 8px solid #fff; box-sizing: border-box;}
#section2 .list_member .info_member{flex: 1; padding: 17px 40px 0;}
#section2 .list_member .info_member .member_name strong{font-size: 28px; font-weight: 400;}
#section2 .list_member .info_member .member_name span{font-weight: bold; color: var(--main-gold2); margin-left: 11px;}
#section2 .list_member .info_member > ul{margin-top: 21px;}
#section2 .list_member .info_member > ul > li{line-height: 32px; padding-left: 10px; text-indent: -10px; word-break: keep-all;}
#section2 .list_member .info_member > ul > li:before{content: "• "; color: var(--main-gold2);}
#section2 .list_member > ul > li.no_thumb .info_member{flex: none; padding: 17px 40px 0 0;}

/*섹션3 : 사야홀 소개*/
#section3{position:relative; padding-top: 94px; padding-bottom: 97px; background: url('../images/main/bg_about.jpg') no-repeat center; background-size: cover}
#section3 .sec_title .title{color: #fff;}
#section3 .images_saya{max-width: 880px; margin: 26px auto 0;}
#section3 .images_saya .saya_img{position:relative; padding-bottom: 32px;}
#section3 .images_saya .saya_img .swiper-slide{-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;}
#section3 .images_saya .saya_img.swiper-container-horizontal>.swiper-pagination-bullets{bottom:0}
#section3 .images_saya .saya_img.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}
#section3 .images_saya .saya_img .swiper-pagination-bullet{width:12px; height:12px; border: 1px solid rgba(255,255,255,.7); background-color: transparent; opacity:1}
#section3 .images_saya .saya_img .swiper-pagination-bullet-active{border-color: rgba(255,255,255,1); background-color: rgba(255,255,255,1)}
#section3 .txt_set{font-weight: 400; line-height: 32px; text-align: center; margin-top: 33px;}
#section3 .txt_set .main_text{font-size: 27px; color: var(--main-gold2);}
#section3 .txt_set p{font-size: 17px; color: rgba(255,255,255,.6); margin-top: 20px; word-break: keep-all;}

/*섹션4 : 오시는 길*/
#section4{position:relative; padding-top: 74px;}
#section4 .contact{display: flex; flex-wrap: wrap; height: calc(100vh - 260px); margin-top: 46px; background-color: #f9f9f7;}
#section4 .contact > div{width: 50%;}
#section4 .saya_map{border-bottom:1px solid #e5e3dd; height:100%}
#section4 .saya_map iframe{width: 100%; height: 100%;}

#section4 .wrap_contact{display: flex; justify-content: flex-end; align-items: center; }
#section4 .wrap_contact .inner_ct{width: 710px; box-sizing: border-box;}
#section4 .wrap_contact .info_contact{width: 590px;}
#section4 .wrap_contact .info_contact .title{font-size: 14px; font-weight: 500; text-transform: uppercase;}
#section4 .wrap_contact .info_contact .txt_set{display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid #222; border-bottom: 1px solid #e8e8e8; margin-top: 7px; letter-spacing: 0;}
#section4 .wrap_contact .info_contact .txt_set .address{line-height: 22px; padding-top: 18px;}
#section4 .wrap_contact .info_contact .txt_set .address address{font-weight: 500;}
#section4 .wrap_contact .info_contact .txt_set .address .txt_en{font-size: 14px; margin-top: 11px; ; margin-bottom: 27px}
#section4 .wrap_contact .info_contact .txt_set .address .txt_contact{font-family:'Roboto', sans-serif; font-size: 14px; font-weight: 500; margin-bottom: 4px;}
#section4 .wrap_contact .info_contact .txt_set .address .txt_contact span{color: var(--main-gold2); margin-right: 5px;}
#section4 .wrap_contact .info_contact .txt_set .image{width: 166px;}
#section4 .wrap_contact .info_contact .txt_set .image img{border-radius: 10px;}
#section4 .wrap_contact .info_contact .txt_set1{margin-top: 30px;}
#section4 .wrap_contact .info_contact .txt_set1 p{font-size: 14px; line-height: 24px; margin-bottom: 10px; padding-left: 24px; text-indent: -24px; word-break: keep-all;}
#section4 .wrap_contact .info_contact .txt_set1 p:last-child{margin-bottom: 0;}
#section4 .wrap_contact .info_contact .txt_set1 p strong{color: var(--main-gold2); padding-left: 24px;}
#section4 .wrap_contact .info_contact .txt_set1 p .ico1{background: url('../images/common/ico_con1.png') no-repeat 0 center; background-size: 16px auto}
#section4 .wrap_contact .info_contact .txt_set1 p .ico2{background: url('../images/common/ico_con2.png') no-repeat 0 center; background-size: 16px auto}