@charset "UTF-8";
@import url(reset.css);
@import url(font.css);
@import url(swiper-bundle.css);


html, body {font-family: 'nanumsquare','Noto Sans KR', sans-serif, serif}
/* font-family: 'Dancing Script', cursive;
font-family: 'Noto Sans KR', sans-serif; */

html, body {font-size:62.5%;font-weight:400;font-style: normal}
section {font-size:1.6rem;}
@media screen and (max-width:768px) { html, body {font-size: 50%} section {font-size: 1.750rem} }

/* Slide */
.Slides .bgImg {width:100%;height:100%;}
.Slides .swiperArrows {color:#202020;font-size:5rem}
.Slides .swiper-button-next {right:1%}
.Slides .swiper-button-prev {left:1%}
.Slides .swiperArrows img {width:24px;height:46px;}
.Slides .swiper-pagination-bullet {background:#fff;font-size:1rem;width:1rem;height:1rem;text-align:center;opacity:0.5}
.Slides .swiper-pagination-bullet {transition:opacity .2s;}
.Slides .swiper-pagination-bullet-active {background:#fff;opacity:1}
.bgImg {background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}

/* header */
header {position:fixed;top:0;width:100%;z-index:1000;}
header:before {position:absolute;top:0;width:100%;height:77px;display:block;content:"";}
header:before {background-color:rgba(255, 255, 255, 0.3);border-bottom:1px solid #e8e8e8;transition:background-color .5s;}
header .innerBox {position:relative;width:80%;margin:0 auto;}
header .innerBox hgroup {display:flex;align-items:center;position:absolute;left:2rem;height:77px;z-index:5;}
header .innerBox hgroup h1 a {display:block;}
header .innerBox hgroup .btns {display:none;}
header nav {position:absolute;right:2rem;width:calc(65rem + 120px);}
header nav > div {display:flex;}
header nav > div > ul {display:flex;width:calc(100% - 120px);}
header nav > div > ul > li {position:relative;}
header nav > div > ul > li:nth-of-type(1) {width:12rem;}
header nav > div > ul > li:nth-of-type(2) {width:15.5rem;}
header nav > div > ul > li:nth-of-type(3) {width:13.5rem;}
header nav > div > ul > li:nth-of-type(4) {width:12rem;}
header nav > div > ul > li:nth-of-type(5) {width:12rem;}
header nav > div > ul > li > a {font-size:1.6rem;line-height:2.6rem;text-align:center;display:block;color:#333333;font-weight:700;}
header nav > div > ul > li > a {padding:2.7rem 0 2.4rem;transition:color .5s;}
header nav > div > ul > li > ul {position:relative;width:100%;height:0;opacity:0;overflow:hidden;z-index:1;}
header nav > div > ul > li > ul li {position:relative;text-align:center;}
header nav > div > ul > li > ul li a {position:relative;display:block;font-size:13px;line-height:18px;padding:7px 0;z-index:1;}
header nav > div > ul > li > ul li:first-child a {padding:20px 0 7px;}
header nav > div > .btns {display:flex;height:77px;align-items:center;}
header nav > div > .btns a {display:inline-block;width:50px;height:50px;margin-left:10px;}
header nav > div > .btns a img {display:block;width:50px;}

header.on:before {background-color:rgba(255, 255, 255, 0.8);}
header > .bg {position:absolute;top:77px;width:100%;height:0;display:block;content:"";}
header > .bg {background-color:rgba(255, 255, 255, 0.7);border-bottom:1px solid #e8e8e8;}
header > .bg {transition:height .5s, opacity 0.5s;}

@media (hover: hover) {
    header nav div > ul > li:hover > a {color:#666666;}
    header nav div > ul > li > ul li:hover a {color:rgb(135, 135, 135);}
} 


/* footer */
footer {background-color:#ababab;padding:3.5rem 0;}
footer .innerBox {display:flex;align-items:center;width:calc(100% - 4rem);max-width:1400px;padding:0 2rem;margin:0 auto;}
footer .innerBox h1 {display:flex;justify-content:flex-start;}
footer .innerBox h1 a {display:block;font-size:12px;color:#e8e8e8;}
footer .innerBox ul {display:flex;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;}
footer .innerBox ul li {width:100%;line-height:22px;text-align:right;}
footer .innerBox ul li span {position:relative;color:#e8e8e8;display:inline-block;font-size:12px;}
footer .innerBox ul li a {color:#e8e8e8;font-size:12px;}
footer .innerBox ul li:first-child a {display:none;}
footer .innerBox ul li.credit {margin-top:5px;}
footer .innerBox ul li.credit a {font-size:13px;}

/* Remove Scrollbar */
header nav .gnb::-webkit-scrollbar {display:none} /* Chrome, Safari, Opera */
header nav .gnb {-ms-overflow-style:none;scrollbar-width:none} /* IE and Edge, Firefox */ 


/*-------------- Responsive ---------------*/
/* Desktop */
@media screen and (max-width:1279px) {
    header .innerBox {width:100%;}
}

/* Tablet or Ipad */
@media screen and (max-width:1023px) {
    header .innerBox hgroup {position:fixed;width:calc(100% - 4rem);left:0;padding:0 2rem;background-color:rgba(255,255,255,0.3);border-bottom:1px solid #e8e8e8;}
    header .innerBox hgroup h1 {display:inline-block;margin:0 auto;text-align:center;}
    header .innerBox hgroup .menu {position:absolute;top:0;left:1rem;padding:23.5px 15px;cursor:pointer;z-index:1;}
    header .innerBox hgroup .menu {width:30px;height:30px;display:flex;align-items:center;justify-content:flex-end;}
    header .innerBox hgroup .menu div {position:relative;display:block;width:30px;background-color:#202020;height:1px;}
    header .innerBox hgroup .menu div::after,
    header .innerBox hgroup .menu div::before {position:absolute;left:0;width:30px;height:1px;opacity:1;}
    header .innerBox hgroup .menu div::after,
    header .innerBox hgroup .menu div::before {background-color:#202020;content:'';transform-origin:center;visibility:visible;}
    header .innerBox hgroup .menu div::after {top:-10px}
    header .innerBox hgroup .menu div::before {top:10px}
    header .innerBox hgroup .menu > div,
    header .innerBox hgroup .menu > div::after,
    header .innerBox hgroup .menu > div::before {transform:rotate(0deg);}
    header .innerBox hgroup .menu.nav-open > div {background-color:transparent;width:100%;}
    header .innerBox hgroup .menu.nav-open > div:after  {transform:rotate(45deg);top:0;}
    header .innerBox hgroup .menu.nav-open > div:before {transform:rotate(-45deg);top:0;}
    header .innerBox hgroup .menu > div::after,
    header .innerBox hgroup .menu > div::before {transition:transform .3s;}
    header .innerBox hgroup .btns {position:absolute;top:15px;right:1rem;display:block;}
    header .innerBox hgroup .btns a {display:inline-block;width:50px;height:50px;margin-right:5px;}
    header .innerBox hgroup .btns a img {display:block;width:50px;}

    header nav {position:fixed;top:0;left:0;right:unset;width:100%;height:100%;overflow:hidden;z-index:1;}
    header nav {transform:translate3d(0, -100%, 0);opacity:0;}
    header nav::before {position:absolute;top:0;left:0;width:100%;height:100%;content:"";background-color:rgb(220, 220, 220)}
    header nav > div {display:flex;flex-direction:column;width:90%;height:calc(100% - 95px);}
    header nav > div {position:absolute;padding:95px 5% 0;overflow-y:scroll;overflow-x:hidden;z-index:1;}
    header nav > div::before {display:none;}
    header nav > div > ul {width:100%;padding:5rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;}
    header nav > div > ul > li {width: 100%!important;}
    header nav > div > ul > li > a {display:block;font-size:3.5rem;line-height:4.5rem;padding:1.5rem 0;color:#202020;}
    header nav > div > ul > li > ul {position:relative;width:98%;top:0;left:0;margin:0 auto 2.5rem;}
    header nav > div > ul > li > ul {transform:translate3d(0, 0, 0);height:0;overflow:hidden;opacity:0;z-index:-1;}
    header nav > div > ul > li > ul li {font-size:16px;line-height:26px;margin-bottom:.5rem;}
    header nav > div > ul > li > ul li::before {display:none;}
    header nav > div > ul > li > ul li a {color:#202020;opacity:.5;font-size:16px;padding:1rem 0;}
    header nav > div > .btns {display:none;}
    header nav div > ul > li.on > a {color:#89A8D7;background-color:rgb(220, 220, 220);font-weight:800;}
    header nav div > ul > li.on > ul {z-index:1;}
    header.on::after {display:none;}
    header.on nav {transform:translate3d(0, 0, 0);opacity:1;}
    
}

/* Tablet or Ipad */
@media screen and (max-width:991px) {
    
}

/* Tablet or Mobile */
@media screen and (max-width:767px) {

    header .innerBox hgroup h1 a img {width:75%;}
    header .innerBox hgroup .btns {top:20px;right:1rem;}
    header .innerBox hgroup .btns a {width:40px;height:40px;margin-right:0;}
    header .innerBox hgroup .btns a img {width:40px;}

    footer {padding:5rem 0;}
    footer .innerBox {display:block;}
    footer .innerBox h1 {display:block;text-align:center;margin-bottom:3rem;}
    footer .innerBox ul {display:block;}
    footer .innerBox ul li {text-align:center;}
    footer .innerBox ul li:nth-of-type(1) span:nth-of-type(3) {display:none;}
    footer .innerBox ul li a {display:inline-block;}

    /* popup */
    .popup {position:absolute;width:350px;left:50%!important;transform:translateX(-50%)!important;z-index:999;}
}

/* Mobile */
@media screen and (max-width: 479px) {
                
} 

/* popup */
.popup {
    position:absolute;
    min-width:300px;
    top:0;
    left:0;
    z-index:999
}
.popup .frame {
    position:relative
}
.popup .swiper-slide {
    flex-wrap:wrap
}
.popup .swiper-slide a {
    width:100%;
    height:100%;
    display:block
}
.popup .swiper-slide a img {
    display:block
}
.popup .swiper-pagination {
    bottom:5.4rem;
}
.popup .control {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    margin-top:1px
} 
.popup .control > div {
    display:inline-block;
    padding:10px 0;
    background-color:#fff
}
.popup .control > div img {
    display:block;
    text-align:center;
    margin:0 auto;
    height:32px
}
.popup .control .swiperArrows {
    position:relative;
    top:0;
    transform:translate3d(0, 0, 0);
    text-align:center;
    margin:0;
    left:unset;
    right:unset;
    height:auto

}
.popup .control .swiperArrows {
    width:calc(50% - 56px)
}
.popup .control .swiperArrows:nth-of-type(1) {
    width:calc(50% - 57px);
    margin-right:1px
}
.popup .control .sideBtns {
    width:55px;
    margin-left:1px;
    cursor:pointer
}
.popup .onedays {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    background-color:#302c2c;
    align-items:center
}
.popup .onedays span {
    display:inline-block;
    width:50%;
    margin:12.5px 0;
    text-align:center;
    color:#e9e9e9;
    font-size:11px;
    cursor:pointer
}
.popup .onedays span.close {
    width:calc(50% - 1px);
    border-left:1px solid #787878
}


/* Tablet or Mobile */
@media screen and (max-width:768px) {

    /* popup */
    .popup {
        position:absolute;
        width:350px;
        left:50%!important;
        transform:translateX(-50%)!important;
    }
}

/* popup-open */
.popup-open {
    position:absolute;
    min-width:300px;
    top:0;
    left:0;
    z-index:9999;
}
.popup-open a,.popup-open a img {
    display:block;
}
.popup-open .onedays {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    background-color:#302c2c;
    align-items:center
}
.popup-open .onedays span {
    display:inline-block;
    width:50%;
    margin:12.5px 0;
    text-align:center;
    color:#e9e9e9;
    font-size:11px;
    cursor:pointer
}
.popup-open .onedays span.close {
    width:calc(50% - 1px);
    border-left:1px solid #787878
}


/* Tablet or Mobile */
@media screen and (max-width:768px) {

    /* popup */
    .popup-open {
        position:absolute;
        width:350px;
        left:50%!important;
        transform:translateX(-50%)!important;
    }
}