@charset "utf-8";

/* ---------- #main ---------- */
#main { margin-top: 160px; }
#main.scroll { margin-top: 60px; }
/* sec_01 */
#main .sec_01 { height: 700px; max-height: 700px; }
#main .pc { display: block; }
#main .mo { display: none; }
#main .sec_01 .main_img { height: 700px; }
#main .sec_01 .text_wrap { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top: 0px; padding: 0 var(--wrap-space); width: 100%; max-width: 1200px; }
#main .sec_01 .s_text { font-size: 16px; font-weight: 400; color: #fff; }
#main .sec_01 .b_text { font-size: 60px; font-weight: 400; color: #fff; line-height: 130%; }
#main .sec_01 .b_text > span { font-weight: 700; color: var(--main-color); }
#main .sec_01 .btn_swiper { position: absolute; z-index: 9; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 0px; width: calc(100% - var(--wrap-space) - var(--wrap-space)); max-width: 1400px; height: 80px; box-sizing: border-box; }
#main .sec_01 .btn_swiper > div { width: 80px !important; height: 80px !important; }
#main .sec_01 .swiper-slide-active .main_img > img.pc { animation-name: main_img; animation-duration: 3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
#main .sec_01 .swiper-slide-active .text_wrap { animation-name: main_text; animation-duration: 0.8s; animation-delay: 0.2s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.btn_swiper > div > svg { display:none; }

/* sec_02 */
#main .sec_02 { position: relative; z-index: 1; }
#main .sec_02 > ul { position: absolute; top: -90px; left: 50%; transform: translate(-50%,0); display: flex; align-items: stretch; }
#main .sec_02 > ul > li { flex-shrink: 0; width: 25%; height: fit-content; background: #fff; text-align: center; }
#main .sec_02 > ul > li > a { display: block; padding: 70px 55px; width: 100%; height: 100%; }
#main .sec_02 > ul > li .ico_wrap { width: 80px; height: 80px; display: inline-block; }
#main .sec_02 > ul > li h2 { margin: 20px 0 10px; font-size: 16px; font-weight: 700; color: var(--gray-11); }
#main .sec_02 > ul > li p { margin: 0 auto; font-size: 16px; font-weight: 400; color: var(--gray-33); line-height: 130%; }
#main .sec_02 > ul > li:nth-child(1) { background: var(--main-color); border-top-left-radius: 42px; border-bottom-right-radius: 42px; }
#main .sec_02 > ul > li:nth-child(1) h2 { color: #fff; }
#main .sec_02 > ul > li:nth-child(1) p { color: #fff; }
#main .sec_02 > ul > li:nth-child(3) { background: var(--gray-f5); }
#main .sec_02 > ul > li:nth-child(4) { border-top-right-radius: 10px; }

/* sec_03 */
#main .sec_03 { margin-top: 224px; padding: 120px 0; }
#main .sec_03 .sec_text { margin: 0 auto; font-size: 36px; color: var(--gray-55); text-align: center; max-width: 670px; }
#main .sec_03 .sec_text > span { font-weight: 700; color: var(--sub-01); }
#main .sec_03 ul { display: flex; justify-content: space-between; align-items: stretch; margin: 80px -10px 0; }
#main .sec_03 ul > li { flex-shrink: 0; padding: 0 10px; width: 25%; box-sizing: border-box; text-align: center; }
#main .sec_03 ul > li > .img_wrap { position: relative; padding-top: 100%; width: 100%; height: 0; border-radius: 10px; overflow: hidden; }
#main .sec_03 ul > li > .img_wrap > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#main .sec_03 ul > li > .title { margin: 20px 0 5px; font-size: 17px; font-weight: 700; color: var(--gray-33); }
#main .sec_03 ul > li > .text { padding: 0 20px; font-size: 15px; font-weight: 400; color: var(--gray-55); }
#main .sec_03 .btn_swiper { display: none; }

/* sec_04 */
#main .sec_04 { padding: 80px 0; background: var(--gray-fa); }
#main .sec_04 .container { display: flex; justify-content: space-between; align-items: stretch; }
#main .sec_04 .container > div { width: 100%; padding: 50px 60px; min-height: 426px; background: #fff; border-radius: 14px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.07); }
#main .sec_04 .gall_wrap {  margin-right: 10px; }
#main .sec_04 .menu_wrap { margin-left: 10px; }
#main .sec_04 .title { position: relative; margin-bottom: 40px; padding-left: 45px; font-size: 20px; font-weight: 700; color: var(--gray-11); }
#main .sec_04 .title::before { position: absolute; top: 0; left: 0; width: 30px; height: 100%; display: block; content: ""; }
#main .sec_04 .gall_wrap .title::before { background: url(/theme/jahye/images/ico/gallery.svg) no-repeat center/contain; }
#main .sec_04 .menu_wrap .title::before { background: url(/theme/jahye/images/ico/week.svg) no-repeat center/contain; }

/* sec_05 */
#main .sec_05 { padding: 120px 0; }
#main .sec_05 .container { display: flex; justify-content: space-between; align-items: stretch; }
#main .sec_05 .con { padding: 0 50px; width: 33%; border-right: 1px solid var(--border-color); box-sizing: border-box; }
#main .sec_05 .con:first-child { padding-left: 0; }
#main .sec_05 .con:last-child {padding-right: 0; border-right: none; }
#main .sec_05 .con > .title { position: relative; margin-bottom: 40px; padding-left: 45px; font-size: 20px; font-weight: 700; color: var(--gray-11); }
#main .sec_05 .con > .title::before { position: absolute; top: 0; left: 0; width: 30px; height: 100%; display: block; content: ""; }
#main .sec_05 .con01 > .title::before { background: url(/theme/jahye/images/ico/info_01.svg) no-repeat center/contain; }
#main .sec_05 .con02 > .title::before { background: url(/theme/jahye/images/ico/info_02.svg) no-repeat center/contain; }
#main .sec_05 .con03 > .title::before { background: url(/theme/jahye/images/ico/info_03.svg) no-repeat center/contain; }
#main .sec_05 .con .text { font-size: 14px; font-weight: 700; color: var(--gray-11); }
#main .sec_05 .con .map_wrap { margin-top: 10px; width: 100%; height: 225px; border-radius: 14px; border: 1px solid var(--border-color); overflow: hidden; }
#main .sec_05 .con .wrap_map { overflow: hidden; }
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 { border: 0 !important; background: none !important; }
.wrap_controllers { display: none; }
#main .sec_05 .con02 { position: relative; }
#main .sec_05 .con02 .text_in { position: relative; padding-left: 19px; }
#main .sec_05 .con02 .text_in::before { position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--gray-11); display: block; content: ""; }
#main .sec_05 .con02 .gray_text { margin-top: 10px; padding-left: 111px; font-size: 14px; font-weight: 300; color: var(--gray-75); }
#main .sec_05 .con02 .call { position: absolute; bottom: 0; left: 50%; transform: translate(-50%,0); padding: 30px; width: calc(100% - 50px - 50px); 
    background: var(--gray-fa); border: 1px solid var(--border-color); border-radius: 14px; }
#main .sec_05 .con02 .b_text { margin-top: 3px; font-size: 36px; font-weight: 700; color: var(--sub-01); }

/* sec_06 */
#main .sec_06 { padding: 30px 0; background: var(--gray-f5); }
#main .sec_06 ul > li { margin: 0px; }
#main .sec_06 ul > li > a { display: block; width: 100%; height: 100%; }


/*** responsive ***/
/* 1920px or more */
@media all and (min-width : 1920px){

    /* sec_01 */
    #main .sec_01 { height: 100%; }

    /* sec_04 */
    #main .sec_04 .text_wrap { width: 1320px; padding-left: 0; padding-right: 700px; }

}


/* 1440px or less */
@media all and (max-width : 1440px){

    /* sec_01 */
    #main .sec_01 { max-height: 700px; }
    #main .sec_01 .text_wrap { padding: 0 120px; }
    #main .sec_01 .s_text { font-size: 15px; }
    #main .sec_01 .b_text { font-size: 50px; }
    #main .sec_01 .btn_swiper { height: 70px; }
    #main .sec_01 .btn_swiper > div { width: 70px !important; height: 70px !important; }

    /* sec_02 */
    #main .sec_02 > ul { top: -60px; }
    #main .sec_02 > ul > li > a { padding: 50px; }

    /* sec_04 */
    #main .sec_04 .container > div { width: 100%; padding: 40px 40px; min-height: 369px; }
    #main .sec_04 div.gall_wrap { width: 60%; margin-right: 5px; }
    #main .sec_04 div.menu_wrap { width: 40%; margin-left: 5px; }

    /* sec_05 */
    #main .sec_05 .con { padding: 0 40px; }
    #main .sec_05 .con02 .call { width: calc(100% - 40px - 40px); }
    #main .sec_05 .con02 .b_text { margin-top: 3px; font-size: 30px; font-weight: 700; color: var(--sub-01); }

}


/* 1200px or less */
@media all and (max-width : 1200px){

    #main { margin-top: 75px; }
    
    /* sec_01 */
    #main .sec_01 { height: calc(100vh - 72px - 3px); height: calc(calc(var(--vh, 1vh) * 100) - 72px - 3px); max-height: 600px; }
    #main .sec_01 .s_text { font-size: 14px; }
    #main .sec_01 .b_text { font-size: 40px; }
    #main .sec_01 .btn_swiper { height: 60px; }
    #main .sec_01 .btn_swiper > div { width: 60px !important; height: 60px !important; }

    /* sec_02 */
    #main .sec_02 > ul > li > a { padding: 30px 15px; }
    #main .sec_02 > ul > li .ico_wrap { width: 60px; height: 60px; }
    #main .sec_02 > ul > li h2 { margin: 15px 0 10px; font-size: 14px; }
    #main .sec_02 > ul > li p { font-size: 14px; max-width: 200px; }
    #main .sec_02 > ul > li:nth-child(1) { border-top-left-radius: 35px; border-bottom-right-radius: 35px; }

    /* sec_03 */
    #main .sec_03 { margin-top: 140px; padding: 80px 0; }
    #main .sec_03 .sec_text { font-size: 32px; }
    #main .sec_03 ul > li { padding: 0px 5px; }
    #main .sec_03 ul > li > .title { margin: 20px 0 5px; font-size: 15px; }
    #main .sec_03 ul > li > .text { padding: 0 10px; font-size: 13px; font-weight: 400; color: var(--gray-55); }

    /* sec_04 */
    #main .sec_04 { padding: 60px 0; }
    #main .sec_04 .container > div { padding: 30px 20px; min-height: 330px; }
    #main .sec_04 .gall_wrap {  margin-right: 5px; }
    #main .sec_04 .menu_wrap { margin-left: 5px; }
    #main .sec_04 .menu_wrap .my_notice > ul > li > a { padding: 18px 5px; }
    #main .sec_04 .title { margin-bottom: 40px; padding-left: 32px; font-size: 16px; }
    #main .sec_04 .title::before { width: 24px;; }

    /* sec_05 */
    #main .sec_05 { padding: 80px 0; }
    #main .sec_05 .con { padding: 0 20px; }
    #main .sec_05 .con > .title { margin-bottom: 40px; padding-left: 32px; font-size: 16px; }
    #main .sec_05 .con > .title::before { width: 24px; }
    #main .sec_05 .con .text { font-size: 13px; }
    #main .sec_05 .con .map_wrap { height: 180px; }
    #main .sec_05 .con02 .text_in { padding-left: 12px; }
    #main .sec_05 .con02 .text_in::before { top: 8px; }
    #main .sec_05 .con02 .gray_text { margin-top: 10px; padding-left: 12px; font-size: 13px; }
    #main .sec_05 .con02 .call { padding: 20px; width: calc(100% - 20px - 20px); }
    #main .sec_05 .con02 .b_text { margin-top: 0px; font-size: 22px; }

    /* sec_06 */
    #main .sec_06 { padding: 20px 0; }

}


/* 767px or less */
@media all and (max-width : 767px){

    /* sec_01 */
    #main .sec_01 { height: calc(100vh - 72px - 3px); height: calc(calc(var(--vh, 1vh) * 100) - 72px - 3px); max-height: calc(calc(var(--vh, 1vh) * 100) - 72px - 3px); }
    #main .pc { display: none; }
    #main .mo { display: block; }
    #main .sec_01 .main_img { height: 100%; }
    #main .sec_01 .text_wrap { top: 50%; left: 50%; transform: translate(-50%,-50%); margin-top: 0px; padding: 0 var(--wrap-space); }
    #main .sec_01 .s_text { font-size: 13px; }
    #main .sec_01 .b_text { font-size: 32px; }
    #main .sec_01 .btn_swiper {left: inherit; right: var(--wrap-space); top: inherit; bottom: 0; transform: translate(0,0); margin-bottom: 20px; width: 110px; height: 50px; }
    #main .sec_01 .btn_swiper > div { width: 50px !important; height: 50px !important; }

    /* sec_02 */
    #main .sec_02 { background: var(--gray-f5); }
    #main .sec_02 > ul { position: relative; z-index: 1; display: block; top: 0px; padding: 0; }
    #main .sec_02 > ul::after { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 173px; background: #fff; display: block; content: ""; }
    #main .sec_02 > ul > li { width: 49.5%; display: inline-block; box-sizing: border-box; }
    #main .sec_02 > ul > li > a { padding: 40px 0; }
    #main .sec_02 > ul > li .ico_wrap { width: 60px; height: 60px; }
    #main .sec_02 > ul > li h2 { margin: 10px 0 0px; font-size: 14px; }
    #main .sec_02 > ul > li p { display: none; }
    #main .sec_02 > ul > li:nth-child(1) { border-top-left-radius: 0px; border-bottom-right-radius: 0px; }
    #main .sec_02 > ul > li:nth-child(2) { background: #fff; }
    #main .sec_02 > ul > li:nth-child(3) { background: #fff; }
    #main .sec_02 > ul > li:nth-child(4) { background: var(--gray-f5); border-top-right-radius: 0px; border-bottom-right-radius: 0px; }

    /* sec_03 */
    #main .sec_03 { margin-top: 0px; padding: 60px 0; }
    #main .sec_03 .container { padding-right: 0; }
    #main .sec_03 .sec_text { margin-bottom: 10px; font-size: 17px; padding-right: var(--wrap-space); }
    #main .sec_03 .bulid_swiper { padding-top: 10px; }
    #main .sec_03 ul { margin: 60px 0 0 0; }
    #main .sec_03 ul > li { padding: 0px; }
    #main .sec_03 ul > li > .title { margin: 20px 0 5px; font-size: 14px; }
    #main .sec_03 ul > li > .text { display: none; }
    #main .sec_03 .btn_swiper { display: block; position: absolute; z-index: 9; top: 0; right: var(--wrap-space); width: 90px; height: 40px; box-sizing: border-box; }
    #main .sec_03 .btn_swiper > div { width: 40px !important; height: 40px !important; }
    
    /* sec_04 */
    #main .sec_04 { padding: 40px 0; }
    #main .sec_04 .container { display: block; }
    #main .sec_04 .container > div { width: 100%; margin: 10px 0; padding: 30px 20px; min-height: auto; }
    #main .sec_04 .gall_wrap { margin-right: 0px; }
    #main .sec_04 .menu_wrap { margin-left: 0px; }
    #main .sec_04 .title { margin-bottom: 20px; padding-left: 45px; font-size: 20px; }
    #main .sec_04 .title::before { width: 30px;  }

    /* sec_05 */
    #main .sec_05 { padding: 60px 0; }
    #main .sec_05 .container { display: block; }
    #main .sec_05 .con { padding: 40px 0px; width: 100%; border-right: 0; border-bottom: 1px solid var(--border-color); }
    #main .sec_05 .con:first-child { padding-top: 0; }
    #main .sec_05 .con:last-child {padding-bottom: 0; }
    #main .sec_05 .con > .title { margin-bottom: 20px; padding-left: 45px; font-size: 20px; }
    #main .sec_05 .con > .title::before { width: 30px; }
    #main .sec_05 .con .text { font-size: 14px; }
    #main .sec_05 .con .map_wrap { margin-top: 10px; height: 225px; }
    #main .sec_05 .con02 .text_in { position: relative; padding-left: 19px; }
    #main .sec_05 .con02 .text_in::before { position: absolute; top: 9px; left: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--gray-11); display: block; content: ""; }
    #main .sec_05 .con02 .gray_text { margin-top: 5px; padding-left: 111px; font-size: 14px; font-weight: 300; color: var(--gray-75); }
    #main .sec_05 .con02 .call { position: relative; bottom: inherit; top: 20px; padding: 30px; width: 100%; }
    #main .sec_05 .con02 .b_text { font-size: 26px; }

    /* sec_06 */
    #main .sec_06 { padding: 15px 0; }


}



/* keyframes */
@-webkit-keyframes main_img {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
@-moz-keyframes main_img {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
@-o-keyframes main_img {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
@keyframes main_img {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
/* keyframes */
@-webkit-keyframes main_text {
    from { margin-left: -120px; opacity: 0; }
    to { margin-left: 0; opacity: 1; }
}
@-moz-keyframes main_text {
    from { margin-left: -120px; opacity: 0; }
    to { margin-left: 0; opacity: 1; }
}
@-o-keyframes main_text {
    from { margin-left: -120px; opacity: 0; }
    to { margin-left: 0; opacity: 1; }
}
@keyframes main_text {
    from { margin-left: -120px; opacity: 0; }
    to { margin-left: 0; opacity: 1; }
}