/* 
    font-family: 'NanumSquare';
 */
 @font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
    #RESET
   ========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'NanumSquare';
    -webkit-text-size-adjust: none;
    
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{border: none;} 
address{font-style: normal;}
fieldset{border: none;} 
legend{position: absolute;left: -999em;} 
input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
button, a, select{cursor: pointer; outline: none;} 
input{ outline: none;}

label.away{position: absolute;left: -999em;} 
html {
    scroll-behavior: smooth;
  }
/* ==========================================================================
    #FONT
   ========================================================================== */
.koL{
    font-family: 'NanumSquare';
    font-weight: 300;
    font-style: normal;
}
.koR{
    font-family: 'NanumSquare';
    font-weight: 400;
    font-style: normal;
}
.koB{
    font-family: 'NanumSquare';
    font-weight: 700;
    font-style: normal;
}
.enL{
    font-family: 'GmarketSansLight';
    font-weight: 300; 
}
.enM{
    font-family: 'GmarketSansMedium';
    font-weight: 500; 
    letter-spacing: -0.04em;
}

.upp{
    text-transform: uppercase;
}
.t-shadow{
    text-shadow: 0 0 8px rgba(34,34,34,.2);
}


/* ==========================================================================
    #COLOR
========================================================================== */
.color_f{color: #fff; }
.color_11{color: #111; }
.color_70{ color: #707070;}
.color_ae{color: #6C6B6B; }

.op_4{ opacity: .4;}
.op_5{ opacity: .5;}
.op_6{ opacity: .6;}


/* ==========================================================================
    #FONT-SIZE
    ========================================================================== */
.f_12{font-size: 14px; }
.f_14{font-size: 14px; }
.f_16{font-size: 16px; }
.f_18{font-size: 18px; }
.f_22{font-size: 22px; }
.f_26{font-size: 26px; }
.f_28{font-size: 28px; }
.f_30{font-size: 30px; }
.f_32{font-size: 32px; }
.f_52{font-size: 52px; }
.f_64{font-size: 64px; }


/* ==========================================================================
    #COL
    ========================================================================== */
.col-1{ width: 100%;}
.col-2{ width: 50%;}
.col-3{ width: 33.33%;}
.col-4{ width: 25%;}
.col-5{ width: 20%;}
.col-7{ width: calc(100%/7);}


/* ==========================================================================
    #MARGIN-BOTTM
    ========================================================================== */
.mb_5{ margin-bottom: 5px}
.mb_10{ margin-bottom: 10px}
.mb_15{ margin-bottom: 15px}
.mb_20{ margin-bottom: 20px}
.mb_25{ margin-bottom: 25px}
.mb_30{ margin-bottom: 30px}
.mb_35{ margin-bottom: 35px}
.mb_40{ margin-bottom: 40px}
.mb_50{ margin-bottom: 50px}
.mb_60{ margin-bottom: 60px}
.mb_80{ margin-bottom: 80px}
.mb_90{ margin-bottom: 90px}
.mb_100{ margin-bottom: 100px}


/* ==========================================================================
    #BTN
    ========================================================================== */
.btn_01{ display:inline-block; width: 260px; height: 65px; line-height: 65px; border: 1px solid #FFF; transition: .3s;}
.btn_01:hover{ border: 1px solid #000; background-color: #000;}



/* ==========================================================================
    #TIT-WRAP
    ========================================================================== */
#tit-wrap h4{ line-height: 20px;}
#tit-wrap h3{ line-height: 50px;}


/* ==========================================================================
    #SCROLLBAR
    ========================================================================== */
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: #666; border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: #fff; }


/* ==========================================================================
    #FLOAT
    ========================================================================== */
.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both; font-size: 0;}




body{ font-family: 'NanumSquare'; font-weight: 400; font-size: 16px; overflow-x: hidden; }
body > section{ min-width: 1440px;}
.wrap1440{ width: 100%; max-width: 1440px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box;}
.wrap1320{ width: 100%; max-width: 1320px; height: 100%; position: relative; margin: 0 auto; box-sizing: border-box; }

.v-middle{ width: 100%; height: 100%; display: table-cell; vertical-align: middle;}
.img{ width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;  position: absolute; top: 0; left: 0; transition: .5s;}

.none-mo{ display: inline-block!important;}
.none-pc{ display: none!important;}



/* swiper */
.swiper-button-prev, .swiper-button-next {outline: none !important; width: 76px; height: 76px; border-radius: 50%; border: 1px solid #fff;}
.swiper-button-prev img.pc, .swiper-button-next img.pc{ display: inline-block; }
.swiper-button-prev img.mo, .swiper-button-next img.mo{ display: none;}
.swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover,
.swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{ background-color: rgba(255,255,255,.3);  transition: .5s; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: .4;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

.swiper-pagination-bullet{ position: relative; width: 12px; height: 12px; border-radius:50%; background: #fff; opacity: 1; margin: 0 9px!important; transition: .3s; }
.swiper-pagination-bullet:after{ content: ''; position: absolute; width: 18px; height: 18px; left: -4px; top: -4px; border: 1px solid rgba(255,255,255,0); border-radius: 50%;}
.swiper-pagination-bullet-active{ width: 10px; height: 10px; position: relative; background: #fff; top: -1px; }
.swiper-pagination-bullet-active:after{border: 1px solid rgba(255,255,255,1); left: -5px; top: -5px;}

#blackbg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,0.9); z-index: 1001; display: none;}
.section-last.scroll{ margin-bottom: 608px;}


/* ==========================================================================
    #FULL-SWIPER
    ========================================================================== */
    .full-swiper{ height: 100vh; position: relative;}
    .full-swiper .img-wrap{ width: 100%; height: 100%; position: relative; }
    .full-btn{position: absolute; top: calc(50% - 30px); text-align: center; }
    .full-prev{ left: 160px;}
    .full-next{ right: 160px;}
    .full-swiper .full-pag{ bottom: 77px; text-align: center; width: 100%;}
    .full-swiper h3{ pointer-events: none; position: absolute; display: inline-block; top: calc(50% - 30px); text-align: center; z-index: 10; left: 0; right: 0; margin: 0 auto;}



/* ==========================================================================
    #ROOM-SWIPER
    ========================================================================== */
    .room-swiper{ width: calc(100% + 20px); height: auto; position: relative;}

/* ==========================================================================
    #FAC-SWIPER
    ========================================================================== */
    .fac-swiper{ width: calc(100% + 20px); height: auto; position: relative;}



/* ==========================================================================
    #SUB-TOP
    ========================================================================== */
#sub-top{ margin-top: 113px; width: 100%; height: 400px; padding: 100px 0; text-align: left;  background-color: #111; position: relative; }
#sub-top .wrap1440{ display: flex; align-items: center; justify-content: flex-start;}
#sub-top .wrap1440 .img-wrap{ width: 173px; border-right: 1px solid #707070; padding: 40px 0;}
#sub-top .wrap1440 .text-wrap{ padding-left: 60px;}
#sub-top .wrap1440 .deco-img{ width: 540px; object-fit: cover; position: absolute; left: 20px;}






/* =================== 1024px =================== */
@media (max-width: 1024px) {
    /* ==========================================================================
    **MOBILE**#FONT-SIZE
    ========================================================================== */
    .m-f_10{font-size: 10px; }
    .m-f_11{font-size: 11px; }
    .m-f_12{font-size: 12px; }
    .m-f_13{font-size: 13px; }
    .m-f_16{font-size: 16px; }
    .m-f_17{font-size: 17px; }
    .m-f_18{font-size: 18px; }
    .m-f_20{font-size: 20px; }
    .m-f_27{font-size: 27px; }



    /* ==========================================================================
    **MOBILE**#COL
   ========================================================================== */
    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}


    /* ==========================================================================
    **MOBILE**#MARGIN-BOTTOM
    ========================================================================== */
    .m-mb_0{ margin-bottom: 0px}
    .m-mb_5{ margin-bottom: 5px}
    .m-mb_10{ margin-bottom: 10px}
    .m-mb_15{ margin-bottom: 15px}
    .m-mb_20{ margin-bottom: 20px}
    .m-mb_25{ margin-bottom: 25px}
    .m-mb_30{ margin-bottom: 30px}
    .m-mb_35{ margin-bottom: 35px}
    .m-mb_40{ margin-bottom: 40px}
    .m-mb_50{ margin-bottom: 50px}
    .m-mb_60{ margin-bottom: 60px}




    body{  font-family: 'NanumSquare'; overflow-x: hidden; position: relative;  }
    body > section{ width: 100%; min-width: unset; height: auto; position: relative; overflow: hidden; box-sizing: border-box;}
    .none-mo{ display: none!important;}
    .none-pc{ display: inline-block!important;}
    .wrap1440{ width: 100%; padding: 0 20px; position: relative; margin: 0 auto; box-sizing: border-box; }
    .wrap1320{ width: 100%; padding: 0 20px; position: relative; margin: 0 auto; box-sizing: border-box; }


    .swiper-button-prev, .swiper-button-next {outline: none !important; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #fff;}
    .swiper-button-prev img.pc, .swiper-button-next img.pc{ display: none; }
    .swiper-button-prev img.mo, .swiper-button-next img.mo{ display: inline-block; width: 22px; object-fit: cover;}
    .swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover,
    .swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{  transition: .5s; }
    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: .4;}
    .swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }

    .swiper-pagination-bullet{ width: 6px; height: 6px; margin: 0 4px!important; }
    .swiper-pagination-bullet:after{ width: 9px; height: 9px; left: -2px; top: -2px; }
    .swiper-pagination-bullet-active{ width: 5px; height: 5px;  top: -1px; }
    .swiper-pagination-bullet-active:after{ left: -3px; top: -3px;}

    

    

    /* ==========================================================================
    **MOBILE**#FULL-SWIPER
    ========================================================================== */
    .full-swiper{ height: auto;}
    .full-swiper .img-wrap{ width: 100%; height: 0; padding-top: 56.25%; position: relative; }
    .full-swiper .swiper-button-next, .full-swiper .swiper-button-prev{ top: calc(50% + 10px)!important;}
    .full-swiper .full-prev{ left: 20px;}
    .full-swiper .full-next{ right: 20px;}
    .full-swiper .full-pag{ bottom: 20px; text-align: center; width: 100%;}
    .full-swiper h3{ top: calc(50% - 5px);}


    /* ==========================================================================
    #SUB-TOP
    ========================================================================== */
    #sub-top{ margin-top: 60px; width: 100%; height: 220px; padding: 40px 0;  }
    #sub-top .wrap1440 .img-wrap{ width: 91px; padding: 15px 0;}
    #sub-top .wrap1440 .img-wrap img{ width: 61px; object-fit: cover; }
    #sub-top .wrap1440 .text-wrap{ padding-left: 20px;}
    #sub-top .wrap1440 .deco-img{ width: 212px; }



    /* ==========================================================================
    **MOBILE**#COMM_TAB
    ========================================================================== */
    .tab-wrap{ overflow-y: scroll;}
    #comm_tab{ display: flex; justify-content: center; width: max-content;}
    #comm_tab a{ display: block; padding: 0 35px 0 0; line-height: 60px;  }
    #comm_tab a.active{ color: #D1972F; opacity: 1;}

}