/* ========== 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: 'Spoqa Han Sans Neo';
    -webkit-text-size-adjust: none;
    line-height: 1.6;
}
/* 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;} 



/* ==========================================================================
#FONT
========================================================================== */
.font1{ font-family: "lust-sans", sans-serif;}

.thin{ font-weight: 100;}
.lig{ font-weight: 300;}
.reg{ font-weight: 400;}
.med{ font-weight: 500;}
.sbold{ font-weight: 600;}
.bold{ font-weight: 700;}
.black{ font-weight: 900;}

.upp{text-transform: uppercase;}
.cap{text-transform: capitalize;}
.t-shadow{text-shadow: 2px 0 4px rgba(0,0,0,.3);}
.b-shadow{box-shadow: 2px 0 4px rgba(0,0,0,.3);}


/* ==========================================================================
#COLOR
========================================================================== */
:root{
    /* color */
    --color-point1:#6C4D38;
    --color-point2: #CFB59E;
    --color-point3: #F7F2EF;
    --color-scrollbar:#6C4D38;
    --color-white:#fff;

}
.cf{color: var(--color-white); }
.point1{ color: var(--color-point1);}
.point2{ color: var(--color-point2);}
.op6{ opacity: .6;}
::selection{ background-color: var(--color-point1); color: var(--color-white); }


/* ==========================================================================
#SCROLLBAR
========================================================================== */
body::-webkit-scrollbar { width: 7px; }
body::-webkit-scrollbar-thumb{ height: 17%; background-color: var(--color-scrollbar); border-radius: 2px; }
body::-webkit-scrollbar-track{ background-color: var(--color-white); }
    
    
/* ==========================================================================
#FLOAT
========================================================================== */
.fl{ float: left;}
.fr{float: right;}
.clb{ clear: both; font-size: 0;}

/* ==========================================================================
#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);}

/* ==========================================================================
#FONT-SIZE
========================================================================== */
.f40{ font-size: 40px;}
.f32{ font-size: 32px;}
.f24{ font-size: 24px;}
.f22{ font-size: 22px;}
.f20{ font-size: 20px;}
.f16{ font-size: 16px;}
.f14{ font-size: 14px;}
.f12{ font-size: 12px;}

h3.tit{ font-size: 32px; font-weight: 500;}
.lh1{ line-height: 1.2;}

/* ==========================================================================
#COMMON
========================================================================== */
body{ font-family: 'Spoqa Han Sans Neo'; font-weight: 300; font-size: 14px; overflow-x: hidden; color: #6C4D38; }
body a{ color: #6C4D38;}
.wrap1400{ width: 100%; max-width: 1440px; padding: 0 20px; 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;}
.bgi{ background-size: cover; background-repeat: no-repeat; background-position: center;}
.none-mo{ display: inline-block!important;}
.none-pc{ display: none!important;}
.flex-wrap{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
a.more-btn{ display: inline-block; font-size: 14px; line-height: 24px; font-weight: 500;}
a.more-btn .circle{ display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; color: #fff; font-size: 10px; background-color: #6C4D38; border-radius: 50%; position: relative; top: -3px; margin-left: 20px;}
#wave-circle{ background-color: #F7F2EF; animation: uneune 5s linear infinite; width: 200px; height: 200px; position: absolute; left: -100px; top: -70px;}
@keyframes uneune {
    0% {
        border-radius: 30% 50% 80% 50% / 60% 40% 30% 50%; 
    }
    20% {
        border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
    }
    40% {
        border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
    }
    60% {
        border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
    }
    80% {
        border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
    }
    100% {
        border-radius: 30% 50% 80% 50% / 60% 40% 30% 50%; 
    }
}
.cursor{ position: absolute; top: 0; left: 0; width: 96px; height: 96px; line-height: 96px; border-radius: 50%; background-color: #fff; font-size: 14px; text-align: center; opacity: 0; z-index: 10000; transition: 0s; transform: scale(.7); pointer-events: none;} 
.cursor.show{ opacity: 1; transform: scale(1);}


/* swiper */
.swiper-button-prev.sub-btn, .swiper-button-next.sub-btn {outline: none !important; background-image: unset!important; width: 25px; height: 40px; font-size: 40px; margin-top: 0; top: calc(50% - 20px); opacity: 1; }
.swiper-button-prev.sub-btn{ left: 0;}
.swiper-button-next.sub-btn{ right: 0;}

.swiper-button-prev.full-btn, .swiper-button-next.full-btn {outline: none !important; background-image: unset!important; width: 15px; height: 24px; font-size: 24px; margin-top: 0; top: unset; position: relative; opacity: 1; }
.swiper-button-prev.full-btn{ left: 0;}
.swiper-button-next.full-btn{ right: 0;}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{ opacity: 1;}
.swiper-button-next:after, .swiper-button-prev:after{ position: absolute; top: -999em; }
.swiper-button-prev:hover, .swiper-button-next:hover{ opacity: 1;}

.swiper-pagination-custom{ width: max-content; font-size: 24px; color: #fff; font-weight: 500; font-family: "lust-sans", sans-serif;}
.swiper-pagination-custom span.number{ color: #fff; font-size: 24px;}
.swiper-pagination-custom span.bar{ padding: 0 5px; font-size: 24px;}


/* ==========================================================================
    #FULL-SWIPER
========================================================================== */
.full-swiper{ width: 100%; height: calc(100vh - 180px); position: relative; overflow: hidden;}
.full-swiper .swiper-slide{ width: 100%; height: 100%;}
.full-swiper .swiper-slide .bgi{ width: 100%; height: 100%;}
.full-swiper .control-wrap{ position: absolute; bottom: 60px; left: 0; right: 0; margin: 0 auto; width: 100px;}
.full-swiper .control-wrap .full-pag{ padding-bottom: 20px; left: 0; right: 0; margin: 0 auto;}
.full-swiper .control-wrap .btn-wrap{ width: 100%; display: flex; height: 24px; justify-content: space-between; align-items: center;}
.full-swiper .control-wrap .btn-wrap .play-pause{ display: block; position: relative; width: 24px; height: 24px; z-index: 10;}
.full-swiper .control-wrap .btn-wrap .play-pause a{ font-size: 24px; position: absolute; top: 0; left: 0; }
.full-swiper .control-wrap .btn-wrap .play-pause a.hide{ display: none;}
.view-all{ width: 100%; height: 30px; line-height: 30px; padding: 0 15px; text-align: right; background-color: #F7F2EF;}
.view-all i{ transform: rotate(-45deg);}

/* ==========================================================================
#IMG-VIEW-ALL
========================================================================== */
#img-view-all{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; background-color: #222; padding: 60px 0 0; z-index: 1000; text-align: center; font-size: 0; display: none;}
#img-view-all.active{ display: block;}
#img-view-all img{ width: 100%; object-fit: cover; padding-bottom: 20px;}
#img-view-all img.logo{ padding-bottom: 20px; width: 118px; object-fit: cover;}
#img-view-all p{ padding-bottom: 40px;}
#img-view-all .close-view-all{ position: fixed; width: 64px; height: 64px; line-height: 64px; text-align: center; border-radius: 50%; background-color: #fff; font-size: 20px; bottom: 30px; left: 0; right: 0; margin: 0 auto; z-index: 1001;}


/* ==========================================================================
    #SUB-SWIPER
========================================================================== */
.sub-slide-wrap{ position: relative;}
.sub-swiper{ width: 100%; height: 100%; position: relative; overflow: hidden;}
.sub-swiper .img-wrap{ width: 100%; height: 296px; position: relative; overflow: hidden; margin-bottom: 20px; background-color: #000;}
.sub-swiper .img-wrap p{ position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(50% - 7px); z-index: 10; opacity: 0; pointer-events: none; transition: .3s; text-align: center;}
.sub-swiper .swiper-slide:hover .img-wrap .img{ transform: scale(1.1); opacity: .9;}
.sub-swiper .swiper-slide.active .img-wrap .img{ transform: scale(1.1); opacity: .6;}
.sub-swiper .swiper-slide.active .img-wrap p{ opacity: 1;}
.sub-swiper .swiper-slide.active{ pointer-events: none;}
.sub-swiper .text-wrap h3{ padding-bottom: 6px;}
.sub-swiper .text-wrap p.op6{ padding-bottom: 10px;}
.sub-swiper .text-wrap p.more{ text-decoration: underline; }
.sub-swiper .swiper-slide.active .text-wrap p.more{ opacity: 0;}
.sub-slide-wrap .sub-btn{ top: 128px;}
.sub-slide-wrap .sub-next{ right: -65px;}
.sub-slide-wrap .sub-prev{ left: -65px;}
/* =================== 1440px =================== */
@media (max-width: 1440px) {
    .sub-swiper .img-wrap{ height: 20.56vw; }
}


/* ==========================================================================
    #FAC-SWIPER
========================================================================== */
.fac-slide-wrap{ position: relative;}
.fac-swiper{ width: 100%; height: 100%; position: relative; overflow: hidden;}
.fac-swiper .img-wrap{ width: 100%; height: 296px; position: relative; overflow: hidden; margin-bottom: 20px; background-color: #000;}
.fac-swiper .img-wrap p{ position: absolute; left: 0; right: 0; margin: 0 auto; top: calc(50% - 7px); z-index: 10; opacity: 0; pointer-events: none; transition: .3s; text-align: center;}
.fac-swiper .swiper-slide:hover .img-wrap .img{ transform: scale(1.1); opacity: .9;}
.fac-swiper .swiper-slide.active .img-wrap .img{ transform: scale(1.1); opacity: .6;}
.fac-swiper .swiper-slide.active .img-wrap p{ opacity: 1;}
.fac-swiper .text-wrap h3{ padding-bottom: 6px;}
.fac-swiper .text-wrap p.op6{ padding-bottom: 10px;}
.fac-swiper .text-wrap p.more{ text-decoration: underline; }
.fac-swiper .swiper-slide.active .text-wrap p.more{ opacity: 0;}
.fac-slide-wrap .sub-btn{ top: 128px;}
.fac-slide-wrap .sub-next{ right: -65px;}
.fac-slide-wrap .sub-prev{ left: -65px;}
/* =================== 1440px =================== */
@media (max-width: 1440px) {
    .fac-swiper .img-wrap{ height: 20.56vw; }
}


/* ==========================================================================
    #SUB-TOP
========================================================================== */
#sub-top{ width: 100%; height: 460px; position: relative;}

/* ==========================================================================
    #SUB-PAG
========================================================================== */
.sub-pag{ padding: 60px 0 20px;}
.sub-pag .top{ padding-bottom: 40px; border-bottom: 1px solid #6C4D38; margin-bottom: 60px;}
.sub-pag .top h3.tit{ padding-bottom: 20px;}
.sub-pag .top p{ width: 655px;}
.sub-pag .top .flex-wrap{ justify-content: flex-start;}
.sub-pag .top a{ margin-right: 20px; transition: .3s; position: relative;}
.sub-pag .top a:after{ content: ''; width: 100%; height: 1px; position: absolute; left: 0; bottom: 5px; background-color: #CFB59E; transform-origin: left; transition: .3s; transform: scaleX(0);}
.sub-pag .top a:hover{ color: #CFB59E;}
.sub-pag .top a.active{ color: #CFB59E;}
.sub-pag .top a:hover:after{ transform: scaleX(1);}
.sub-pag .top a.active:after{ transform: scaleX(1);}
.sub-pag .btm.flex-wrap{ align-items: flex-start;}
.sub-pag .btm.flex-wrap .con{ width: calc(50% - 8px); display: block; margin-bottom: 60px; }
.sub-pag .btm.flex-wrap .con .img-wrap{ width: 100%; height: 323px; position: relative; overflow: hidden; margin-bottom: 20px; background-color: #000;}
.sub-pag .btm.flex-wrap .con:hover .img-wrap .img{ transform: scale(1.1); opacity: .9;}
.sub-pag .btm.flex-wrap .con .text-wrap{ padding: 0 10px;}
.sub-pag .btm.flex-wrap .con .text-wrap h3{ padding-bottom: 6px;}
.sub-pag .btm.flex-wrap .con .text-wrap .op6{ padding-bottom: 10px;}
.sub-pag .btm.flex-wrap .con .text-wrap .op6 span{ padding: 0 5px;}
.sub-pag .btm.flex-wrap .con .text-wrap p.more{ text-decoration: underline;}

/* ==========================================================================
    #SUB-TAB
========================================================================== */
#sub-tab{ width: 100%; height: 70px; background-color: #6C4D38;}
#sub-tab .flex-wrap{ justify-content: flex-start;}
#sub-tab a{ margin-right: 40px;}
#sub-tab a.active{ text-decoration: underline;}

/* =================== 1024px =================== */
@media (max-width: 1024px) {

    
    /* ==========================================================================
    **MOBILE**#COL
   ========================================================================== */
    .m-col-1{ width: 100%;}
    .m-col-2{ width: 50%;}
    .m-col-3{ width: calc(100%/3);}

    /* ==========================================================================
    **MOBILE**#FONT-SIZE
    ========================================================================== */
    .mf32{ font-size: 32px;}
    .mf28{ font-size: 28px;}
    .mf24{ font-size: 24px;}
    .mf20{ font-size: 20px;}
    .mf16{ font-size: 16px;}
    .mf14{ font-size: 14px;}
    .mf12{ font-size: 12px;}
    .mf11{ font-size: 11px;}
    .mf10{ font-size: 10px;}


    h3.tit{ font-size: 24px; }

    /* ==========================================================================
    **MOBILE**#BTN
    ========================================================================== */
    body{ font-family: 'Spoqa Han Sans Neo'; 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;}
    .wrap1400{ width: 100%; padding: 0 15px; position: relative; margin: 0 auto; box-sizing: border-box;}
    a.more-btn .circle{ margin-left: 10px;}
    #wave-circle{ width: 128px; height: 128px; position: absolute; left: 0; right: 0; top: -50px; margin: 0 auto;}


    /* swiper */
    .swiper-button-prev.sub-btn, .swiper-button-next.sub-btn{ display: none;}
    .swiper-button-prev.white-btn, .swiper-button-next.white-btn { display: none;}
    .swiper-button-prev, .swiper-button-next { width: 25px; height: 40px; font-size: 40px; }
    .swiper-button-prev{ left: 15px;}
    .swiper-button-next{ right: 15px;}

    /* ==========================================================================
    #FULL-SWIPER
    ========================================================================== */
    .full-swiper{ height: calc(100vh - 300px); }
    .full-swiper .control-wrap{ bottom: 20px; }


    /* ==========================================================================
    #SUB-SWIPER
    ========================================================================== */
    .sub-slide-wrap .wrap1400{ padding: 0 0 0 15px;}
    .sub-swiper .img-wrap{ height: 60.53vw; }
    .sub-swiper .img-wrap p{ display: none;}
    .sub-swiper .text-wrap h3{ padding-bottom: 10px;}
    .sub-swiper .text-wrap p.op6{ padding-bottom: 20px;}
    .sub-swiper .text-wrap p.more{ text-decoration: underline; }
    .sub-swiper .swiper-slide.active .text-wrap p.more{ opacity: 0;}


     /* ==========================================================================
    #FAC-SWIPER
    ========================================================================== */
    .fac-slide-wrap .wrap1400{ max-width: 100%; padding: 0 0 0 15px;}
    .fac-swiper .img-wrap{ height: 76.27vw; }
    .fac-swiper .img-wrap p{ display: none;}
    .fac-swiper .text-wrap h3{ padding-bottom: 10px;}
    .fac-swiper .text-wrap p.op6{ padding-bottom: 20px;}
    .fac-swiper .text-wrap p.more{ text-decoration: underline; }
    .fac-swiper .swiper-slide.active .text-wrap p.more{ opacity: 0;}


    /* ==========================================================================
        #SUBPAG-SLIDE-SECTION
    ========================================================================== */
    .subpag-slide-section{ padding: 60px 0 120px;}
    .subpag-slide-section .top{ padding-bottom: 25px;}
    .subpag-slide-section .top i{ font-size: 26px; padding-left: 10px; position: relative; top: 3px;}
    .subpag-slide-section .swiper-wrap{ position: relative;}
    .subpag-slide-section .swiper-wrap .subpag-swiper{ padding-bottom: 16px;}
    .subpag-slide-section .swiper-wrap .subpag-pag{ bottom: 0; width: 100%; top: unset;}
    .subpag-slide-section .swiper-wrap .bgi{ width: 100%; height: 44.80vw; margin-bottom: 10px;}
    .subpag-slide-section .swiper-wrap p.f14{ padding-bottom: 10px;}
    .subpag-slide-section .swiper-wrap .subpag-btn{ display: none;}


    /* ==========================================================================
    #SUB-TOP
    ========================================================================== */
    #sub-top{ height: 100vw; max-height: 375px; }

    /* ==========================================================================
    #SUB-PAG
    ========================================================================== */
    .sub-pag{ padding: 40px 0 20px;}
    .sub-pag .wrap1400{ padding: 0;}
    .sub-pag .top{ border-bottom: none; margin-bottom: 40px; padding: 0 15px;}
    .sub-pag .top p{ width: 100%;}
    .sub-pag .top a{ margin-right: 10px; }
    .sub-pag .btm.flex-wrap .con{ width:calc(50% - 2px); margin-bottom: 40px; }
    .sub-pag .btm.flex-wrap .con .img-wrap{ width: 100%; height: 50vw; margin-bottom: 10px; }
    .sub-pag .btm.flex-wrap .con .text-wrap{ padding: 0 15px;}
    .sub-pag .btm.flex-wrap .con .text-wrap h3{ padding-bottom: 5px;}
    .sub-pag .btm.flex-wrap .con .text-wrap p.op6{ padding-bottom: 10px;}
    .sub-pag .btm.flex-wrap .con .text-wrap p.more{ text-decoration: underline;}

    /* ==========================================================================
    #SUB-TAB
    ========================================================================== */
    #sub-tab{ height: 62px; overflow-y: auto;}
    #sub-tab::-webkit-scrollbar{ display: none;}
    #sub-tab .flex-wrap{ width: max-content;}
    #sub-tab a{ margin-right: 30px;}
    #sub-tab a:last-child{ margin-right: 0;}
}