@charset "utf-8";
@font-face { font-family: 'SUIT-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } 
@font-face { font-family: 'MapoFlowerIsland'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoFlowerIslandA.woff') format('woff'); font-weight: normal; font-style: normal; } 
@font-face { font-family: '-KITA-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/-KITA-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } 
@font-face { font-family: 'Orbit-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/Orbit-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } 

.include_head{position: fixed; top: 0; left: 50%; transform: translateX(-50%); width:100%; height:75px; z-index: 100; background: transparent; }
.include_head.fixed { background: #fff; }
::-webkit-scrollbar {display: block;width: 10px;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-button {display: none;}
::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,.15);}


* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  -webkit-tap-highlight-color: rgba(0,0,0,0);} 
body { width: 100%; font-family: 'SUIT-Regular'; color: #272727; position: relative; /*background-color: #f1edeb;*/ background-color: #f5f2f1; line-height: 1.5em; } 
h1,h2,h3 { line-height: 1.5em; }
section { position: relative; height: 100vh; /*background-color: #f1eee9;*/ background-color: #f5f2f1; } 
main { position: relative; z-index: 1; }  
a { text-decoration: none; color: #272727; } 
a:visited { color: #272727; } 
i { color: #272727; font-size: 32px; } 
button { border-radius: 25px; text-transform: uppercase; border: 1px solid #272727; background: none; transition: all .3s ease-in-out; }
button:hover { background: #272727; color: #fff;}
.f-sb-center { display: flex; justify-content: space-between; align-items: center; } 
.f-d-center { display: flex; align-items: center; text-align: center; } 
.f-center-center { display: flex; justify-content: center; align-items: center; } 
.f-sb { display: flex; justify-content: space-between; } 
.content-box { width: 1400px; } 
.white-box { position: absolute; background-color: #fff; } 
.swiper-slide { background-size: cover; background-repeat: no-repeat; background-position: center; } 
.onepage-container { height: auto; } 
.onepage-wrapper { height: auto; } 
.calender-btn{ margin-left:30px;}
/* .calender-btn i { font-size: 36px; } */
.calender-btn p{color: #fff; margin-top: 4px; margin-bottom: -10px; line-height: 1em; font-size: 12px;}
.m_br{display:none;}

/* 스크롤 유도 */
.scroll_down:before{content:'scroll down'; position: absolute; text-align: center; width:100px; color: #eee; bottom:-80px; left: 50%; transform:translateX(-50%); text-shadow: 0 1px 3px rgba(0,0,0,.1);}
.scroll_down {z-index: 2;  position: absolute; bottom: 100px; left: 50%; transform: translate(-50%, -50%); opacity: 1;}
.scroll_down span{ display: block; width: 20px; height: 20px; border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); margin: -10px; animation: down_arrow 3s infinite; text-shadow: 0 1px 3px rgba(0,0,0,.2);}
.scroll_down span:nth-child(1){animation-delay: -0.125s !important;}
.scroll_down span:nth-child(2){animation-delay: -0.25s !important;}
@keyframes down_arrow{
    0%{ opacity: 0;}
    25%{ opacity: 0; transform: rotate(45deg) translate(-20px,-20px);}
    35%{ border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff;}
    50%{ opacity: 1;}
    60%{ border-bottom: 2px solid #fff; border-right: 2px solid #fff;}
    75%{ opacity: 0; transform: rotate(45deg) translate(20px,20px);}
    100%{ opacity: 0;}
}


header { position: relative; top: 20px; left: 0; z-index: 100;} 
header .content-box { position: absolute; left: 50%; transform: translateX(-50%); height: 75px; } 
header div a img { width: 160px; height: 100%; transition: 0.3s; } 
header div a .black-logo { display: none; }
header div div a i { color: #fff; font-size: 36px; transition: 0.3s; } 
header div div .menu-btn { position: relative; display: block; width: 50px; height: 50px; margin-left: 30px; cursor: pointer; z-index: 51; } 
header div div .menu-btn span { position: absolute; top: calc(50% - 1px); left: 0; width: 100%; height: 2px; background-color: #fff; transition: 0.3s; } 
header div div .menu-btn :first-child { transform: translateY(-12px); } 
header div div .menu-btn :last-child { transform: translateY(12px); } 
header div div .menu-btn.opens { z-index: 54; } 
header div div .menu-btn.opens span { background-color: #272727; z-index: 54; } 
header div div .menu-btn.opens :first-child { transform: rotate(45deg); } 
header div div .menu-btn.opens :nth-child(2) { top: 50%; transform: translateY(-50%); opacity: 0; } 
header div div .menu-btn.opens :last-child { transform: rotate(-45deg); } 
header.fixed { background: #fff; }
header.fixed div div .menu-btn span { background-color: #272727; } 
header.fixed div div a i { color: #272727; }
header.fixed div div a p { color: #272727; }
header.fixed div div .naver-btn img { filter: invert(100%); } 
header.fixed div a .white-logo { display: none; } 
header.fixed div a .black-logo { display: block; } 
.include_head.sub_head header.fixed { top: 0; width: 100%; height: 80px; background-color: #fefefe;  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.05);}
.calender-btn.openss i{ color: #272727; }
.calender-btn.openss p{ color: #272727;}
.naver-btn.openss img { filter: invert(100%); }
.menu-box { position: fixed; top: 0; right: 0; width: 35%; height: 100vh; background: #fefefe; justify-content: center; align-items: center; opacity: 1; display: block; display: none; z-index: 10; transition: all .4s ease-in-out; } 
.menu-box ul { flex-flow: column; width: 100%;}
.menu-box ul.sidemenu{width: 80%; padding-top: 80px;}
.menu-box .sidemenu> li { font-size: 20px; padding: 16px 8px; width: 100%;}
.menu-box ul.sidemenu>li a{ position: relative; display: block; width: 100%; }
.menu-box ul.sidemenu>li.nakjos{ cursor: pointer;}
.menu-box ul.sidemenu>li.nakjos>a{ pointer-events: none; padding:0; display:inline;}
.menu-box ul.sidemenu>li a .bar{ height: 1px; background:#333; position: absolute; right:-40px; top: 16px; transition: all .25s ease-in-out;}
.menu-box ul.sidemenu>li a .bar1{ width: 10px; transform:skewY(45deg); right:-35px;}
.menu-box ul.sidemenu>li a .bar2{ width: 10px; transform:skewY(-45deg); right:-45px;}
.menu-box ul.sidemenu>li.open a .bar1{ width: 12px; transform:skewY(45deg); right:-40px;}
.menu-box ul.sidemenu>li.open a .bar2{ width: 12px; transform:skewY(-45deg); right:-40px;}
.menu-box ul li .submenu { height: 100%; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
.menu-box ul li .submenu.two{width: 100%; display: flex; flex-direction:row; justify-content: center;; align-items: flex-start;}
.menu-box ul li .submenu.two> div{width: 40%; }
.menu-box ul li .submenu li { font-size: 18px; width: 100%;}
.menu-box ul li .submenu li:nth-child(1){margin-top: 10px;}
.menu-box ul li .submenu li:last-child{padding-bottom: 0;}
.menu-box ul li .submenu li a { color: #999; padding:10px; display: block; width: 100%;}
.menu-box ul li .submenu li a span { display: block; font-size: 16px; }
.menu-box ul li .submenu li a:hover{ color: #555;}
/*.menu-box ul .nakjos:hover .submenu { max-height: 320px; }*/


footer { position: relative; background-color: #f1edeb; background: #f5f2f1; ; height: 200px; font-size: 14px; } 
footer .content-box { position: absolute; height: 100%; top: 0px; left: 50%; transform: translateX(-50%); padding: 40px 0; } 
footer div .f-infos li { line-height: 1.5em; }
footer> div> :last-child { text-align: right; justify-content: flex-end; align-self: flex-end; } 
footer> div> :last-child p { line-height: 1.3em; }
footer div div img { width: 25px; margin-bottom: 10px; }
footer div div p .who { transition: all .3s ease-in-out; }
footer div div p .who:hover { color: #ff5a53; }

@media screen and (max-width: 1440px){
    .content-box { width: 1200px; } 
}

@media screen and (max-width: 1400px){
    /* .content-box { width: calc(100% - 50px); }  */
    .menu-box { width: 440px;} 
}

@media screen and (max-width: 1280px){
    .content-box { width: calc(100% - 50px); } 
}

@media screen and (max-width: 1024px){
    .menu-box { width: 380px;} 
    .menu-box .sidemenu> li { font-size: 18px; }
    .menu-box ul li .submenu li { font-size: 16px; }
    .menu-box ul.sidemenu>li a .bar { width: 8px; top: 10px; }
    .menu-box ul.sidemenu>li a .bar1 { right: -37px; }

    footer { height: 240px; border-top: 1px solid #ddd; }
    footer .content-box { display: block; }
 }

@media screen and (max-width: 840px) {
    .include_head{ position:sticky; left:0; transform:translateX(0);}

    header { top: 0;} 
    header.fixed { top:0;} 
    header .content-box { height: 80px; background: #fefefe; width: 100%; padding: 0 25px; } 
    header div a img { width: 150px; } 
    header div a .white-logo { display: none; } 
    header div a .black-logo { display: block; } 
    header div div a i { font-size: 28px; color: #272727; } 
    header div div .menu-btn { width: 30px; margin-left: 15px; } 
    header div div .menu-btn span { background-color: #272727; }
    header div div .menu-btn :first-child { transform: translateY(-9px); } 
    header div div .menu-btn :last-child { transform: translateY(9px); } 
    .calender-btn{margin-left: 15px;}
    .calender-btn p { color: #272727; font-size: 12px;} 

    .menu-box ul.sidemenu { padding-top: 40px; }
    .menu-box { top: 0px; width: 100%; height: 100vh; } 
    .menu-box ul { flex-flow: column; /* padding-top: 40px; */}
    .menu-box ul li { padding:0; } 
    .menu-box ul li::after { transform: translate(-50%, 30px) scaleX(0); width: 100px; height: 2px; } 
    .menu-box ul li:hover::after { transform: translate(-50%, 30px) scaleX(1); } 

    footer { height: auto; font-size: 12px; padding: 40px 0; } 
    footer .content-box { position: static; transform: none; height: auto; padding: 0; margin: 0 auto;} 

    .m_skip{display:none;}
    .m_br{display:block;}
}

@media screen and (max-width: 600px) {
    .content-box { width: calc(100% - 40px); }

    header .content-box{padding: 0 20px;}
    .calender-btn p { font-size: 11px;} 

    footer div .f-infos { margin-bottom: 20px; }
}

@media screen and (max-width: 400px) {
    header div a img { width: 120px; }
    .calender-btn p { font-size: 9px;} 
}

@media screen and (max-width: 350px) {
    header div a img { width: 100px; }
    .calender-btn { margin-left: 10px; }
}