.main_visual { position : relative } 
.main_visual .slide_inner_txt { position : absolute; top : 40%; left : 50%; transform: translate(-40%, -50%); color : #fff; text-align : center } 
.main_visual h2 span { display : inline-block; font-size : 40px; padding : 20px 0; border-bottom : 1px solid rgba(255, 255, 255, 0.5); background : url('/resource/templete/ENG/img/main/kevisual_text_line.gif') no-repeat top center } 
.main_visual p { margin-top : 20px; font-size : 16px; line-height : 150% } 
.main_visual_ctrl_wrap { position : absolute; bottom : 130px; left : 0; width : 100%; display : flex; align-items: center; justify-content: center; } 
.main_visual_ctrl_wrap .swiper-pagination { top : inherit !important; bottom : 20px !important; position: static; width: auto; } 
.main_visual_ctrl_wrap .swiper-pagination span { width : 15px; height : 15px; background-color : #fff } 
.main_visual_ctrl_wrap a { color : #fff }
.main_visual_ctrl_wrap a i { top : 0 }
.ctrl_btn { position : relative; z-index : 2; margin-left : 10px }
.ctrl_btn #mainPlay { display : none }
.ctrl_btn.active #mainPlay { display : block }
.ctrl_btn.active #mainStop { display : none }
#mainSection02 { position : relative; height : 155px; top : -100px; z-index : 2  }
#mainSection02 a { position : absolute; display : flex; width : 33.33%; bottom : 0; height : 135px; flex-direction: column; justify-content: center; padding : 0 30px; background : url('/resource/templete/ENG/img/main/icon_arrow_off.png') no-repeat right 30px center }

#mainSection02 a * { flex-basis: 0; color : #fff; transition : all .3s ease }
#mainSection02 #banner01 { left : 0; background-color : #c32b2b  }
#mainSection02 #banner02 { left : 33.33%; background-color : #e3b12b   }
#mainSection02 #banner03 { left : 66.66%; background-color : #193c80   }

#mainSection02 p { position : relative; top : 55px;  opacity: 0; height : 0; }
#mainSection02 h2 { position : absolute; top : 50px; }
#mainSection02 a:hover { height : 155px }
#mainSection02 a:hover p { top : 10px; opacity: 1; height : auto }
#mainSection02 a:hover h2 { top : 40px }



#mainSection03 { display : flex; justify-content: space-between; margin : 50px 0 100px  }
.main_info_slide { position : relative; overflow : hidden }
.main_info_slide a { display : flex; justify-content: space-between; height : 450px }
.main_info_slide .txt_box { background-color : #f6f6f6; padding : 35px; width : 500px; flex-shrink: 0; }
.main_info_slide span { display : block }
.main_info_slide h2 { font-size : 30px; margin : 30px 0 10px }
.main_info_slide h2 + p { font-size : 14px }
.main_info_slide .swiper-wrapper i { display : inline-block; width : 70px; height : 6px; background-color : #000; margin-right : 10px }
.main_info_slide h3 { font-size : 20px; font-weight: normal; margin : 30px 0 10px }
.main_info_slide .txt { font-size : 14px; }
.main_info_slide .img_wrap { background-color : #fff }
.main_info_slide .arrow_wrap { position : absolute; bottom : 0; left : 395px; z-index : 2 }
.main_info_slide .arrow_wrap div { display : inline-flex; width : 50px; height : 50px; align-items: center; background-color : #ccc; justify-content: center; color : #fff; transition : all .3s ease; cursor : pointer }
.main_info_slide .arrow_wrap div i { top : 0; left : 3px }
.main_info_slide .arrow_wrap div:hover { background-color : #000 }




.main_info_banner { flex-basis: 500px; flex-shrink: 0;  }
.main_info_banner * { color : #fff !important }
.main_info_banner a { display : block }
.main_info_banner .resident_wrap,
.main_info_banner .reservation_wrap { height : 225px; padding : 45px }
.main_info_banner .resident_wrap { background : url('/resource/templete/ENG/img/main/resident_bg.jpg') no-repeat center center / cover }
.main_info_banner .resident_wrap h3 { margin-bottom : 20px}
.main_info_banner .resident_wrap a { font-size : 15px; color : rgba(255, 255, 255, 0.5)}
.main_info_banner .resident_wrap a:before { content : ''; display : inline-block; width : 3px; height : 3px; border-radius: 100%; background-color : #fff; position : relative; top : -4px; margin-right : 5px  }
.main_info_banner .reservation_wrap { background : url('/resource/templete/ENG/img/main/reservation_bg.jpg') no-repeat center center / cover; padding-top : 75px; font-size : 22px  }
.main_info_banner .reservation_wrap img { display : block; margin-top : 10px; opacity: 0.5; transition : all .3s ease  }
.main_info_banner .reservation_wrap:hover img { opacity: 1;}

#mainSection04 { position : relative; background : url('/resource/templete/ENG/img/main/hellogugak_bg.jpg') no-repeat center center / cover; padding : 30px 0 30px 80px; display : flex; align-items: center; height : 380px }#mainSection04 * { color : #fff }
#mainSection04 h2 { font-size : 52px; margin-right : 80px  }
#mainSection04 h2 span { display : block; width : 35px; height : 5px; background-color : #fff; margin-bottom : 10px  }
#mainSection04 p { font-size : 16px; line-height : 150% }
#mainSection04 a { position : absolute; top : 50%; right : 0; margin-top : -40px; display : flex; width : 45px; height : 80px; align-items: center; justify-content: center  }
#mainSection04 a i { top : 0 }
#mainSection04 a:hover { background-color : #ae6819; color : #fff }


#mainSection05 { margin-top : 100px; display : flex;  border-top : 1px solid #000; justify-content: space-between; align-items: center;}
#mainSection05 .img_wrap { width : 110px; height : 110p; border-radius : 100%; overflow : hidden }
#mainSection05 ul { overflow : auto hidden; white-space : nowrap; width : calc(100% - 200px); flex-shrink: 0; }
#mainSection05 ul li { position : relative; display : inline-block; width : 35px; line-height : 35px; text-align : center; padding : 30px 0; }
#mainSection05 ul li a { display : block; width : 35px; line-height : 35px;  background-color: #fae9e9; border-radius : 100%; color : #7b4b2f }
#mainSection05 ul li a.active { background-color: #993232; color : #fff }
#mainSection05 ul li a.active:before { content : '▲'; font-size : 20px; position : absolute; bottom : 7px; left : calc(50% - 9px); color : #993232; line-height : 0  }
.cal_detail_wrap { display : none; position : relative;  background-color : #993232; padding : 0 0 0 70px; align-items: center;  }
.cal_detail_wrap.active { display : flex }
.cal_detail_wrap .img_wrap { width : 110px; height : 110px; border-radius: 100%; flex-shrink: 0;  }
.cal_detail_wrap .detail_txt { height : 150px; overflow : auto; padding : 30px; color : #fff }
.cal_detail_wrap .detail_txt * { color : #fff !important }
.cal_detail_wrap .detail_txt .detail_title { font-size : 26px }
.cal_detail_wrap .detail_txt .detail_date { font-size : 14px; margin : 15px 0 20px }
.cal_detail_wrap a { text-align : center; background-color : rgba(0, 0, 0, 0.5); color : #fff; height : 220px; padding : 90px 20px  }


footer { margin-top : 100px }

@media ( max-width : 1440px ) {
    .main_info_slide .txt_box { width : 400px }
    .main_info_banner { flex-basis : 400px }
    .main_info_slide .arrow_wrap { left : 295px }
}

@media ( max-width : 1200px ) {
    .inner { padding : 0 10px !important }
    .main_visual h2 span { font-size : 30px }
    #mainSection02 a { padding : 0 10px }
    #mainSection03 { flex-wrap : wrap }

    .main_info_banner { flex-basis: 100%; flex-shrink: 0; overflow : hidden }
    .main_info_banner > * { float : left; width : 50% }

    #mainSection04 h2 { font-size : 40px }

   
}

@media ( max-width : 900px ){
    .main_visual p,
    #mainSection02 a { background-position : right 30px bottom 30px !important }
    #mainSection02 p { display : none }
    #mainSection02 a:hover { height : 135px }
    #mainSection02 a:hover h2 { top : 50px }

    #mainSection04 { flex-direction: column; align-items: baseline; justify-content: center; padding : 40px; height : auto }

}


@media ( max-width : 750px ){
    .main_info_slide a { height : auto; flex-wrap : wrap }
    .main_info_slide .txt_box { width : 100%; margin : 0 auto }
    .main_info_slide .arrow_wrap { bottom : inherit; top : 0; left : inherit; right : 0 }
    .main_info_slide .img_wrap { display : none }

    .cal_detail_wrap .img_wrap { margin : 0 auto 20px }
    .cal_detail_wrap { flex-wrap : wrap; padding : 30px 0 0 0 }
    .cal_detail_wrap a { width: 100%; flex-shrink: 0; padding : 20px; text-align : center; height : auto; display : flex; align-items: center; justify-content: center; font-size : 20px }
    
}
@media ( max-width : 700px ){
    .main_info_banner > * { width : 100%; float : none }
}