/* =========================================================
   FONT
========================================================= */

@font-face {
   font-family: 'ConneqtRegular';
   src: url('../fonts/ConneqtRegular.woff2') format('woff2'), url('../fonts/ConneqtRegular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}


/* =========================================================
   RESET
========================================================= */

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,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; }

html { box-sizing:border-box; -webkit-text-size-adjust:100%; }

*, *::before, *::after { box-sizing:inherit; }

body { margin:0; }

ol, ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote::before, blockquote::after,
q::before, q::after { content:''; }

table { border-collapse:collapse; border-spacing:0; }

img, picture, video, canvas, svg { display:block; max-width:100%; }

img { height:auto; }

input, button, textarea, select { margin:0; font:inherit; color:inherit; }

button { padding:0; border:0; background:none; cursor:pointer; }

textarea { resize:vertical; }

fieldset { min-width:0; margin:0; padding:0; border:0; }

legend { padding:0; }

a { color:inherit; text-decoration:none; }

button, a { -webkit-tap-highlight-color:transparent; }

hr { height:0; margin:1em 0; padding:0; border:0; border-top:1px solid #ccc; }

[hidden] { display:none !important; }

::selection { background:#b3d4fc; text-shadow:none; }

/* box sizing */

html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit;
}


/* ==========================================================================
   LAYOUT
========================================================================== */

body { color:#000; line-height: 1.8; font-size:14px; font-family: Arial, sans-serif; }

#wrap { position: relative; }



/* ==============================================
   layout
   ============================================== */

html,
body.home {height: 100%;}

html { overflow:auto; overflow-y:scroll;}
body { color:#000; line-height: 24px; font-size:12px; font-family: '맑은 고딕','Malgun Gothic','나눔고딕','Nanum Gothic',돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif; }

body.home #wrap {height: 100%;}

/* header */

#wrap > header { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 130px; background-color: #fff; padding: 0 56px; margin: 0 auto; z-index: 9999; }
body.home #wrap > header,
body #wrap > header.transparent {background: transparent;}

#wrap > header h1 { width: 200px; margin: 0 auto; }
#wrap > header h1 span,
#wrap > header h1 a { display: block; height: 130px; font-family: 'ConneqtRegular'; line-height: 130px; color: #000; font-size: 32px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; font-weight: normal; text-align: center; }
/*#wrap > header h1 a:hover { color: #aaa; }*/

#wrap > header a.fmOpen { position: absolute; left: 90px; top: 8px; width: 24px; height: 66px; text-indent: -9999px; text-decoration: none; background: url(../images/common/menu.png) center center no-repeat; }

.mobileMenu {display: none;}

#wrap.white header h1 a {color: #fff;}


/* gnb */

.gnb {z-index: 9998;}
.gnb .primary {position: absolute;left: 56px;top: 0;}
.gnb .customer {position: absolute;right: 130px;top: 0;}
.gnb .customer ul.maison { display: none; }
.gnb ul.list {*zoom:1;} /* Hack for browser IE5.5~7 */
.gnb ul.list:after { content:" "; display:block; clear:both;} /* float virtual element */
.gnb ul.list {}
.gnb ul.list li {float: left;}
.gnb ul.list li a {display: block;font-family: 'ConneqtRegular';font-size: 11px;color: #000;text-decoration: none;letter-spacing: 0.08em;text-transform: uppercase;padding: 53px 24px;}
.gnb ul.list li a span {display: block;height: 25px;line-height: 24px;}
.gnb ul.list li a:hover {}
.gnb ul.list li a:hover span {border-bottom: 1px solid #000;}

.gnb p.copy {display: none;}

#wrap.white .gnb ul.list li a {color: #fff;}
#wrap.white .gnb ul.list li a:hover span {border-bottom: 1px solid #fff;}

/* mediaquery for moble */

@media only screen and (max-width: 1200px) {

   /* header */

   #wrap > header { height: 52px; padding: 0 2.5rem; }

   #wrap > header h1 { width: 100px; margin: 0 auto; }
   #wrap > header h1 span,
   #wrap > header h1 a { height: 52px; line-height: 52px; font-size: 20px; }

	#wrap.mobileBlack header h1 a {color: #000 !important;}
	#wrap.mobileWhite header h1 a {color: #fff !important;}

   /* gnb */

   .gnb { display: none; position: fixed; left: 0; top: 0; width: 80%; height: 100vh; background-color: #fff; padding: 80px 2.5rem 0; }
   body.menuActive .gnb { display: block; }
   /*body.menuActive header:after { content: " "; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,.4); z-index: 9997; }*/
   .gnb .primary {position: relative;left: auto;top: auto; margin-bottom: 0; }
   .gnb .customer {position: relative;right: auto;top: auto;margin-top: 34px;}
   .gnb .customer ul.maison { display: block; margin-top: 24px; }
   .gnb ul.list {}
   .gnb ul.list li {float: none;}
   .gnb ul.list li a {font-size: 13px;padding: 4px 0;}
   .gnb ul.list li a span {height: 25px;line-height: 24px;}
   .gnb ul.list li a:hover span {border-bottom: 0;}

   #wrap.white .gnb ul.list li a {color: #000 !important;}

   .gnb p.copy { display: block; font-family: 'ConneqtRegular'; line-height: 24px; font-size: 11px; color: #c3c3c3; letter-spacing: 0.08em; margin-top: 50px; }

}


@media only screen and (max-width: 738px) {

   /* header */

   #wrap > header { padding: 0 1.5rem; }

}



/* ==========================================================================
   MOBILE MENU
========================================================================== */

.mobileMenu{
    display:none;
    position:absolute;
    left: calc(2.5rem - 22px);
    top: 7px;
    width:40px;
    height:40px;
    color:transparent;
    overflow:hidden;
    z-index: 9999;
}

.mobileMenu span,
.mobileMenu::before,
.mobileMenu::after{
    content:"";
    position:absolute;
    left:8px;
    width:24px;
    height:2px;
    background:#000;
    transition:all .3s ease;
}

/* 첫번째 선 */
.mobileMenu::before{
    top:12px;
}

/* 두번째 선 */
.mobileMenu span{
    top:50%;
    margin-top:-1px;
}

/* 세번째 선 */
.mobileMenu::after{
    bottom:12px;
}

#wrap.white .mobileMenu span,
#wrap.white .mobileMenu::before,
#wrap.white .mobileMenu::after { background: #fff; }

body.menuActive #wrap .mobileMenu span,
body.menuActive #wrap .mobileMenu::before,
body.menuActive #wrap .mobileMenu::after { background: #000 !important; }


@media only screen and (max-width: 1200px) {

   .mobileMenu { display: block; }

	#wrap.mobileBlack .mobileMenu span,
	#wrap.mobileBlack .mobileMenu::before,
	#wrap.mobileBlack .mobileMenu::after { background: #000 !important; }

	#wrap.mobileWhite .mobileMenu span,
	#wrap.mobileWhite .mobileMenu::before,
	#wrap.mobileWhite .mobileMenu::after { background: #fff !important; }


    /* ==========================
       DIMMED BACKGROUND
    ========================== */

    #wrap > header:after {
        content:"";
        display:block;
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100vh;

        background:rgba(0,0,0,.4);

        opacity:0;
        visibility:hidden;
        transition:
            opacity .3s ease,
            visibility 0s linear .3s;

        z-index:9997;
    }

    body.menuActive #wrap > header:after {
        opacity:1;
        visibility:visible;

        transition:
            opacity .3s ease,
            visibility 0s;
    }

    /* ==========================
       GNB SLIDE
    ========================== */

    .gnb {
        display:block;
        position:fixed;
        left:0;
        top:0;
        width:80%;
        height:100vh;
        background:#fff;
        padding:80px 2.5rem 0;

        transform:translateX(-100%);
        transition:transform .4s cubic-bezier(.4,0,.2,1);

        z-index:9998;
    }

    body.menuActive .gnb {
        transform:translateX(0);
    }


}



/* ==========================
   MENU ACTIVE
========================== */

body.menuActive .mobileMenu::before{
    top:50%;
    transform:translateY(-50%) rotate(45deg);
}

body.menuActive .mobileMenu span{
    opacity:0;
}

body.menuActive .mobileMenu::after{
    bottom:auto;
    top:50%;
    transform:translateY(-50%) rotate(-45deg);
}


/* ==============================================
   language
============================================== */

#wrap > header .language {
	position: absolute;
	top: 50%;
	right: 56px;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	gap: 4px;

	font-size: 12px;
	line-height: 24px;
}

#wrap > header .language a {
	display: block;
	font-family: 'ConneqtRegular';font-size: 11px;color: #aaa;text-decoration: none;letter-spacing: 0.08em;text-transform: uppercase;
}

#wrap > header .language a.active {
	color: #000;
}

#wrap.white > header .language { color: #fff; }
#wrap.white > header .language a { color: #ddd; }
#wrap.white > header .language a.active { color: #fff; }


@media only screen and (max-width: 1200px) {

	#wrap > header .language {
		position: relative;
		top: auto;
		right: auto;
		transform: none;
		margin-top: 34px;
	}

	#wrap.white > header .language { color: #000; }
	#wrap.white > header .language a { color: #aaa; }
	#wrap.white > header .language a.active { color: #000; }

}



/* ==============================================
   main
   ============================================== */

#mainBody {position: relative;height: 100%;}

/* visual */

#mainBody .mainVisual {position: relative;height: 100%;
   -webkit-backface-visibility: hidden;
   background-position: top center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#mainBody .mainVisual p.img {width: 100%;height: 100%;overflow: hidden;}
#mainBody .mainVisual p.img img {height: 100%; width: 100%; object-fit: cover}
#mainBody .mainVisual .mobileVisual {width: 100%;height: 100%;
   -webkit-backface-visibility: hidden;
   background-position: top center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
#mainBody p.link {position: absolute;left: 0;bottom: 90px;width: 100%;text-align: center;}
#mainBody p.link a {display:inline-block; display: -moz-inline-stack; zoom:1; *display:inline;font-family: 'ConneqtRegular';font-size: 11px;color: #000;text-decoration: none;}
#mainBody p.link a span {display: block;height: 25px;line-height: 24px;border-bottom: 1px solid #000;}
#mainBody p.link a:hover {}
#mainBody p.link a:hover span {}

#wrap.white #mainBody p.link a {color: #fff;}
#wrap.white #mainBody p.link a span {border-bottom-color: #fff;}

/* video */

#mainBody .mainVideo {position: relative;height: 100vh;}
#mainBody .mainVideo video {width: 100%;height: 100%;object-fit: cover;object-position: center;}

/* mediaquery for moble */

@media only screen and (max-width: 1200px) {

   #mainBody p.link {bottom: 40px;}

}

@media only screen and (max-width: 738px) {

   #mainBody .mainVisual {background: none !important;}
   #mainBody .mainVisual p.img {display: none;}
   #mainBody .mainVisual .mobileVisual {display: block;}

	#wrap.mobileBlack #mainBody p.link a {color: #000 !important;}
	#wrap.mobileBlack #mainBody p.link a span {border-bottom-color: #000 !important;}

	#wrap.mobileWhite #mainBody p.link a {color: #fff !important;}
	#wrap.mobileWhite #mainBody p.link a span {border-bottom-color: #fff !important;}


}

@media only screen and (min-width: 739px) {

   #mainBody .mainVisual .mobileVisual {display: none;background: none !important;}

}