#idx_wrapper {
    height: 100vh;
}
@font-face {
    font-family: 'JejuMyeongjo';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/jeju/JejuMyeongjo.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/jeju/JejuMyeongjo.eot?#iefix') format('embedded-opentype'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/jeju/JejuMyeongjo.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/jeju/JejuMyeongjo.woff') format('woff'),
    url('https://cdn.jsdelivr.net/gh/webfontworld/jeju/JejuMyeongjo.ttf') format("truetype");
    font-display: swap;
}
/* 메인슬라이더 */

#main .mySwiper {
    width: 100%;
    height: 100vh;
    position: relative;
}



#main .mySwiper .swiper-slide {
    background-position: center;
    background-size: cover;
}

#main .mySwiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
a {
    color: inherit;
    cursor: pointer
}
#main .mySwiper .swiper-wrapper:before{content: "";display: block;left: 0;top: 0;background-color: #00000012;position: absolute;width: 100%;height: 100%;z-index: 9}
#main .mySwiper .slogan{ position: absolute; z-index: 10; left: 50%; top: 65%; transform: translate(-50%, -50%);
    color: #fff; font-size: 2em; text-align: center; line-height: 1.8em; width: max-content;}
#main .mySwiper .slogan h2{
    font-size: 2.3em;
    margin-bottom: 10px;
    color: #008AB5;
    font-weight: 500;
    font-family: 'HS-Regular';
    background-image: linear-gradient(to right, #008AB5, #f9d423);
    -webkit-background-clip: text; /* Webkit/Blink browsers */
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 5px #ffffff23;
}
#main .mySwiper .slogan h3{font-size: 1.5em;color: #002852;fo;font-weight: 500;margin-bottom: 20px;font-family: 'HS-Regular';word-break: keep-all;text-shadow: 0 0 5px #fff;}
#main .mySwiper .slogan p{
}



#main {position: relative;    width: 100%;}
#main .pan {display: flex; align-items: center; width: 100%; height: 80px; max-width: 1400px; bottom: 80px; left: 50%; transform: translateX(-50%); position: absolute; z-index: 2; background: #fff}
#main .pan > div:first-of-type,
#main .pan .notice {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px}
#main .pan > a {width: 80px; height: 80px; aspect-ratio: 1/1; text-align: center; padding: 16px 13px; box-shadow: 0 0 15px #00000020 }
#main .pan > a.a1 {background: #ececec}
#main .pan > a.a2 {background: #cbcbcb}
#main .pan > a.a3 {background: #008AB5; color: #fff}
#main .pan > a svg {font-size:2em  }
#main .pan > a p {font-size: 0.75em; letter-spacing: -1.5px; font-weight: 800 }
span.lt_date {font-size: 13px!important;}
/*메뉴소개*/

.items{    height: 70vh;padding:0; background: #fff/*url("../img/main/idx_menu_bg.jpg") no-repeat 0 0/100% 60%*/; padding: 15vh 0;	position: relative;}
.items .bg_text{color: rgba(255,255,255,0.7); font-family: 'JejuMyeongjo';
    position: absolute; right: 100px; top: 20%; text-align: right; font-size: 1.5em; line-height: 1.4em;}
#items{width: calc(100% - 600px); float: right}
#items .intro{ position: absolute; width: 400px; overflow: hidden; left: 200px; top: 25%;}
#items .intro .mini_title{font-size: 1.5em;font-weight: 800;}
#items .intro .name{font-family: 'HS-Regular'; line-height: 1.25em;font-size: 3.5em;  margin: 20px 0 40px 0;}
#items .intro .name span{font-size: 15px; color:#008AB5; font-weight: 400;}
#items .intro .exp{font-size: 1.4em; line-height: 1.6em; opacity: 0.8; font-weight: 300; margin-bottom: 20px;}
#items .intro .btn{ border-radius: 0; border: 1px solid #008AB5; color: #008AB5; padding: 10px 20px;}
#items .swiper-container{overflow: hidden;}
#items .swiper-container .swiper-slide{width: auto;}
#items .swiper-container .swiper-slide {background:#eeeeee;}
#items .swiper-slide .img {    max-width: 250px;;}
#items .swiper-slide .img img {    width: 100%;    max-width: 300px; ;}
#items .swiper-slide .img .text {     height: 150px;}
#items .swiper-slide .text{padding:20px;   position: relative;}
#items .swiper-slide .text .q{font-size: 1.2em;color: #00000056; font-weight: 800; }
#items .swiper-slide .text .qn{color: #008AB5;font-size: 1.5em; font-weight: 600; margin: 10px 0;  width: 100%;  white-space: normal;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;   }
#items .swiper-slide .text .qna{color: #333333; position: absolute;    bottom: 15px;  right:20px;  text-align:right;font-size: 0.8em; line-height: 1.6em; opacity: 0.8; font-weight: 300; margin-top: 20px;}

#room .swiper-slide {position: relative}
#room .swiper-slide .txt{background:linear-gradient(to right, #522828 75%, #52282800 100%); width: 45%; height: 100%; position: absolute; left: 0; top: 0; padding: 15% 10%}
#room .swiper-slide .txt p {font-size: 1.3em;color: #ffffff; font-weight: 500;  margin: 15px 0 }
#room .swiper-slide .txt p:nth-child(2n) {  margin-bottom: 40px}
#room .swiper-slide .txt h6 {font-size: 1.25em;color: #ff5353; font-weight: 800; }
#room .swiper-slide .txt h5 {font-family: 'JejuMyeongjo'; line-height: 1.25em;font-size: 3.5em;  margin: 20px 0 40px 0; color: #fff}
#room .mySwiper2 {    width: 100%;   height: 100vh;    position: relative;}
#room .mySwiper2 .swiper-slide {    background-position: center;    background-size: cover;}
#room .mySwiper2 .swiper-slide img {    display: block;    width: 100%;    height: 100vh;    object-fit: cover;}
#room .swiper-button {    bottom: 30%;    position: absolute;    width: 170px;    left: 10%;}
#room .swiper-button-prev, #room .swiper-button-next {
    background-image: none;   background-color: #fff0;    opacity: 1;    padding: 30px 30px;    border-radius: 50px;    color: #fff !important; border: 1px solid #fff}
#room .swiper-button-prev:after, #room .swiper-button-next:after {    font-size: 3rem !important;    font-weight: 600 !important;}

#us {display: flex; justify-content: space-between; align-items: center; background: #f6efe0; padding:  5% 10%}
#us .intro {width: 100%; max-width: fit-content; margin-right: auto}
#us .intro .mini_title{font-size: 1.5em;font-weight: 800;}
#us .intro .name{font-family: 'JejuMyeongjo'; line-height: 1.25em;font-size: 3.5em;  margin: 20px 0 40px 0;}
#us .intro .name span{font-size: 15px; color:#008AB5; font-weight: 400;}
#us .intro .exp{font-size: 1.4em; line-height: 1.6em; opacity: 0.8; font-weight: 300; margin-bottom: 20px;}
#us > a   {text-align: center}
#us > a .img   {width: 180px; height: 180px; aspect-ratio: 1/1; text-align: center; padding: 2%; box-shadow: 0 0 15px #00000020; border-radius: 200px;
    display: flex; justify-content: center; align-items: center}
#us > a:nth-child(2n) .img   { box-shadow: 0 0 15px #00000020 inset;}
#us > a img  {height: 80px}
#us > a p  {font-family: 'JejuMyeongjo';font-size: 1.4em; margin-top: 20px; color: #757065; font-weight: 800}
#us > a:last-child p  {text-decoration: underline}
#us > a:not(:last-child)  {margin-right: 2%}

@media (max-width: 1400px) {
    #main .pan {bottom: 60px!important; flex-wrap: wrap}
    #main .pan > a {width: calc( 100% / 3 )}
    #room .swiper-slide .txt{ width: 65%;}
}

@media (max-width: 1200px) {
    #items .swiper-container-2{ position: unset; width: 100%; }
    #items{width: calc(100%); float: unset!important;}
    .items{    height: fit-content!important; padding: 5vh 0;}

    #items .intro {        position: unset;        width: 100%;        padding: 10%;}
    #items .intro .mini_title{font-size: 1.1em; }
    #items .intro .name{;font-size: 2.2em;  margin: 15px 0 20px 0; }
    #items .intro .name span{font-size: 15px; color:#008AB5; font-weight: 400;}
    #items .intro .btn{ border-radius: 0; border: 1px solid #008AB5; color: #008AB5; padding: 10px 20px;}

    #room .swiper-slide .txt{ width: 100%; height: fit-content; padding: 7% 10%;}
    #room .swiper-slide .txt p {font-size: 1em; display: inline-block; width: 49%; margin: 0!important;}
    #room .swiper-slide .txt h6 {font-size: 1.1em; }
    #room .swiper-slide .txt h5 {;font-size: 2.2em;  margin: 15px 0 20px 0; }
    #room .swiper-button {    bottom: 100px; width: 120px}
    #room .swiper-button-prev, #room .swiper-button-next { padding: 20px 20px;   }
    #room .swiper-button-prev:after, #room .swiper-button-next:after {    font-size: 1.5rem !important; ;}

    #us {flex-wrap: wrap;padding: 10%; align-items: flex-start}
    #us .intro {width: 100%; max-width: unset}
    #us .intro .mini_title{font-size: 1.1em;;}
    #us .intro .name{;font-size: 2.2em;  margin: 15px 0 20px 0; }
    #us .intro .exp{font-size: 1.2em; }
    #us > a {     width: 24%   }
    #us > a:nth-child(-n+2) {     margin-bottom: 20px   }
    #us > a .img{     width: 100%; height: auto!important;   }
    #us > a img{       height: auto;        max-width: 100px;    }
    #us > a:not(:last-child) {        margin-right: 0%;    }
}

@media (max-width: 800px) {

    #us > a {     width: 49%   }
    #us > a p  {font-size: 1.05em; letter-spacing: -1px }
}

@media (max-width: 600px) {
    #us > a img{       height: auto;        max-width: 50px;    }
    #items .swiper-slide .img .text {    max-width: unset;width: 100%;    height: 150px;}
    #items .swiper-slide .text .qn {	font-size: 1.2em;}
}


.scrolldown a {
    position: relative;
    display: block;
    position: relative;
    padding: 39px 5px;
    box-sizing: border-box;
}

.scrolldown a > i {
    position: relative;
    font-style: normal;
    font-weight: 200;
    font-size: 15px;
    color: #fff;
}

.scrolldown a > i:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -22px;
    width: 14px;
    height: 9px;
    margin-top: -4.5px;
    background: url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%;
    background-size: cover;
}

.scrolldown a:before {
    display: none;
    content: "";
    position: absolute;
    top: 50%;
    left: 35px;
    width: 14px;
    height: 9px;
    margin-top: -4.5px;
    background: url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%;
    background-size: cover;
}



@media (max-width: 1600px) {
    .inr {
        width: 1050px;
    }
}

@media (max-width: 1500px) {
    .inr {
        width: 90%;
    }


    #visual .bx-controls {
        left: calc(50% - 40%);
        left: -webkit-calc(50% - 40%);
    }

    .scrolldown {
        width: calc(50% - 40%);
        width: -webkit-calc(50% - 40%);
    }

    .line .left {
        left: calc(50% - 40%);
        left: -webkit-calc(50% - 40%);
    }

    .line .right {
        right: calc(50% - 40%);
        right: -webkit-calc(50% - 40%);
    }
}

@media (max-width: 1400px) {
    .inr {
        width: 100%;
    }

    #visual .line {
        display: none;
    }

    .scrolldown {
        width: 200px;
    }

}

@media (max-width: 1200px) {
    #visual .txt {
        padding: 0 0 0 50px;
    }

    /*
	#visual .txt > h3{font-size:3.4em;}
	#visual .txt > h2{font-size:5.8em;}
*/
    #idx_wrapper,
    #visual,
    #visual .sliderbx{
        height: 100vh;
    }
}

@media (max-width: 1024px) {
}

@media (max-width:900px) {

    .scrolldown a {
        padding: 32px 5px;
    }

    #visual .bx-controls {
        width: 150px;
        height: 86px;
    }

    #visual div.bx-pager div {
        margin: 0 27px 0 0;
    }
}

@media (max-width:768px) {
    .scrolldown {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .scrolldown a > i {
/*        display: none;*/
        font-size: .9em;
    }

    .scrolldown a {
        height: 100%;
        padding: 5px;
    }

    .scrolldown a:before {
        display: block;
        left: 50%;
        margin-left: -7px;
    }

    #visual .bx-controls {
        left: 70px;
        height: 70px;
    }

    #visual div.bx-pager div a {
        width: 6px;
        height: 6px;
    }

    #visual div.bx-pager div a:after {
        width: 26px;
        height: 26px;
        margin-top: -10px;
        margin-left: -10px;
    }
}

@media (max-width:500px) {

    #visual .bx-controls {
        left: 60px;
        width: 100px;
        height: 60px;
    }

    #visual div.bx-pager div {
        margin: 0 20px 0 0;
    }

    #visual div.bx-pager div a {
        width: 5px;
        height: 5px;
    }

    #visual div.bx-pager div a:after {
        width: 24px;
        height: 24px;
        margin-top: -9px;
    }
}

@media (max-width:450px) {

    #main .mySwiper .slogan{width: 100%; font-size: 1em; top: 50%;}

}



#content .middle{/*background: linear-gradient(to right, #008AB5, #f9d423);*/ background-color: #eeeeee; padding: 5vh 0;}
#content .middle .inr{width: 100%; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 300px 1fr 400px; align-items: center; gap: 0 30px; }

#content .middle .intro .name{font-family: 'HS-Regular'; line-height: 1.25em;font-size: 3em;}
#content .middle .intro .name strong{font-size: 0.8em; color:#008AB5; font-weight: 400;}


#content .middle .inr .cus{ display: grid; grid-template-columns: 1fr 1fr; gap:0 30px;}
#content .middle .inr .cus h3{font-size: 2em; margin-bottom: 10px;}
#content .middle .inr .cus h3 span{font-size: 13px; font-weight: normal; opacity: 0.8;}

#content .middle .inr .cus .tel,
#content .middle .inr .cus .bank{display: flex; align-items: top;}

#content .middle .inr .cus svg{display: block;background-color: #008AB5;color: #fff;border-radius: 50%;width: 50px;height: 50px;line-height: 50px;text-align: center;padding: 10px;margin-right: 15px;}
#content .middle .inr .cus .tel p{font-size: 1em; line-height: 1.4em;}
#content .middle .inr .cus .tel p.bold{font-weight: 600; color: #002852; font-size: 2.2em;}

#content .middle .inr .cus .bank strong{font-size: 1.8em; margin-top: 10px; display: inline-block;}
#content .middle .inr .cus .bank .logo img{height: 20px;}
@media screen and (max-width: 1200px) {
    #content .middle .inr{grid-template-columns: 1fr 400px; }
    #content .middle .intro{display: none;}

}
@media screen and (max-width: 992px) {
    #content .middle .inr{display: block; padding: 40px 15px 15px;}
}

@media screen and (max-width: 768px) {
    #content .middle .inr{display: block; padding: 40px 15px 15px;}
    #content .middle .inr .cus{display: block;}
    #content .middle .inr .cus .tel,
    #content .middle .inr .cus .bank{margin-bottom: 20px; font-size: 0.9em;}
}


.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }