@charset 'UTF-8';
@import url(https://cdn.rawgit.com/kattergil/NotoSerifKR-Web/76eb9ebf/stylesheet/NotoSerif-Web.css);

@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-style: normal;
    src: url("../fonts/Pretendard-Thin.woff") format("font-woff"),
    url("../fonts/Pretendard-Thin.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-style: normal;
    src: url("../fonts/Pretendard-ExtraLight.woff") format("font-woff"),
    url("../fonts/Pretendard-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/Pretendard-Light.woff") format("font-woff"),
    url("../fonts/Pretendard-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/Pretendard-Regular.woff") format("font-woff"),
    url("../fonts/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/Pretendard-Medium.woff") format("font-woff"),
    url("../fonts/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/Pretendard-SemiBold.woff") format("font-woff"),
    url("../fonts/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/Pretendard-Bold.woff") format("font-woff"),
    url("../fonts/Pretendard-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-style: normal;
    src: url("../fonts/Pretendard-ExtraBold.woff") format("font-woff"),
    url("../fonts/Pretendard-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-style: normal;
    src: url("../fonts/Pretendard-Black.woff") format("font-woff"),
    url("../fonts/Pretendard-Black.woff2") format("woff2");
}

@font-face {
    font-family: "NotoSerifKR";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/NotoSerifKR-Regular.woff") format("font-woff"),
    url("../fonts/NotoSerifKR-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "aviano-sans";
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: "aviano-sans";
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "aviano-sans";
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "aviano-sans";
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "aviano-sans";
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "mittwoch", serif;
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "adobe-hebrew", sans-serif;
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "ltc-bodoni-175", serif;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.__mw { font-family:"mittwoch"; }
.__ah { font-family:"adobe-hebrew", sans-serif; }
.__ftr { font-family:"futura-pt", sans-serif; }
.__bdn { font-family:"ltc-bodoni-175"; }
.__nts { font-family:'Noto Serif KR', serif; }
.__av { font-family:"aviano-sans"; }


* { box-sizing: border-box; /*word-break:keep-all; */}

body { position:relative; word-wrap:break-word; font-family:"Pretendard", '나눔고딕', "Apple SD Gothic Neo", 'Malgun Gothic', '맑은고딕', sans-serif, arial; font-size:16px; box-sizing:border-box; overflow:auto; overflow-x:hidden; overflow-y:scroll; -ms-overflow-style:none; scrollbar-width:none; }
::-webkit-scrollbar { display:none; }
::-webkit-scrollbar-button { display: none; }
button { border:none; background:none; margin:0; padding:0; }

section { position:relative; width:100%; height:auto; overflow:hidden; }
p { font-size:18px; line-height:30px; font-weight:300; letter-spacing:-.44px; }
h5 { font-size:26px; line-height:34px; letter-spacing:-.78px; }

img { border:0px; max-width:100%; }

.btn_top { display:none; position:fixed; bottom:50px; right:50px; width:49px; height:49px; background:url(../img/btn_top.svg) no-repeat center center; background-size:100% auto; z-index:3; cursor:pointer; }


/* intro */
.intro { display:flex; justify-content:center; align-items:center; position:relative; /*margin-top:78px;*/ width:100%; height:177vh; z-index:5; background:#111; }
.intro .layer_wrap { position:relative; width:100%; height:100%; }

.intro .layer_wrap .__layer { position:absolute; left:50%; transform:translateX(-50%); width:100%; }
.intro .layer_wrap .layer_1 { top:110vh; }
.intro .layer_wrap .layer_2 { opacity:0; position:fixed; top:24vh; }
.intro.__stop .layer_wrap .layer_2 { position:absolute; top:100vh; }
.intro .layer_wrap .layer_3 { top:126vh; }

/*.intro .layer_wrap .layer_1 { z-index:1; }*/
.intro .layer_wrap .layer_1 { z-index:3; }
.intro .layer_wrap .layer_2 { z-index:2; }
.intro .layer_wrap .layer_3 { z-index:3; }

.intro .layer_wrap .__layer h1 { font-family:"aviano-sans"; color:#fff; font-size:8vh; line-height:8vh; font-weight:400; text-align:center; text-shadow:0 0 15px rgba(0,0,0,0.15); }
.intro .layer_wrap .__layer h1.point { color:#cc2b2b; }
.intro .layer_wrap .layer_3 h1 { color:#cc2b2b; }
.intro .layer_wrap .layer_2 img { display:block; margin:0 auto; height:60.6vh; }



/* sub */
.sub { display:flex; width:100vw; height:100vh; }
.sub .sub_visual { overflow:hidden; width:47vw; height:inherit;  }
.sub .sub_visual .__img { width:47vw; height:inherit; background:url(../img/sub.jpg) no-repeat center center; background-size:cover; }

.sub .sub_txt { display:flex; align-items:center; width:53vw; height:inherit; background:#000; }
.sub .sub_txt .__inner { margin-left:80px; color:#fff; }
.sub .sub_txt .__inner h3 { overflow:hidden; font-size:34px; line-height:35px; font-weight:400; }
.sub .sub_txt .__inner h3 + h3 { color:#cc2a2b; }
.sub .sub_txt .__inner h3 span { display:block; }
.sub .sub_txt .__inner p { margin-top:26px; width:422px; font-size:16px; line-height:26px; letter-spacing:-.48px; }
.sub .sub_txt .__inner p b { font-weight:700; }

/* marquee */
.marquee { width:auto; }
.__mq { position:relative; height:210px; width:max-content; }
.__mq:last-child:after { content:''; position:absolute; bottom:0; left:0; width:100vw; height:1px; background:#000; z-index:10; }
.__mq .mq_box { white-space:nowrap; }

.__mq .__inner { display:flex; border-top:1px solid #000; }
.__mq .__inner * { transition:all .3s ease; }
.__mq .__inner > li { flex: 0 0 auto; background:#fff; }
.__mq .__txt { padding:0 60px 0 40px; border-right:1px solid #000; }
.__mq .__txt a { text-decoration:none; }
.__mq .__txt h1 { color:#000; font-family:"futura-pt", 'pretendard', sans-serif; font-size:80px; line-height:210px; font-weight:500; text-transform:uppercase; }
.__mq .__txt h1 b { font-weight:400; }
.__mq .__img { position:relative; padding:15px; width:290px; height:210px; border-right:1px solid #000; cursor:pointer; }
.__mq .__img a { /*pointer-events:none;*/ }
.__mq .__img img { display:block; width:260px; height:180px; }

.__mq .__img .__mask { opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:260px; height:180px; transition:all .3s ease; z-index:3; }
.__mq .__img:hover .__mask { opacity:1; }

.__mq .__img.img_1 .__mask { background:url(../img/mq_01_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_2 .__mask { background:url(../img/mq_02_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_3 .__mask { background:url(../img/mq_03_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_4 .__mask { background:url(../img/mq_04_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_5 .__mask { background:url(../img/mq_05_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_6 .__mask { background:url(../img/mq_06_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_7 .__mask { background:url(../img/mq_07_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_8 .__mask { background:url(../img/mq_08_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_9 .__mask { background:url(../img/mq_09_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_10 .__mask { background:url(../img/mq_10_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_11 .__mask { background:url(../img/mq_11_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_12 .__mask { background:url(../img/mq_12_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_13 .__mask { background:url(../img/mq_13_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_14 .__mask { background:url(../img/mq_14_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_15 .__mask { background:url(../img/mq_15_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_16 .__mask { background:url(../img/mq_16_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_17 .__mask { background:url(../img/mq_17_h.jpg) no-repeat center center; background-size:100% auto; }
.__mq .__img.img_18 .__mask { background:url(../img/mq_18_h.jpg) no-repeat center center; background-size:100% auto; }



/* common */
.__dimmed { position:fixed; top:0; left:0; transform:scaleY(0); transform-origin:top; width:100vw; height:100vh; background:#111; transition:transform .4s ease; z-index:5; }
.__dimmed.active { transform:scaleY(1); transform-origin:bottom; }

.brand { position:relative; }
/*.brand > div { padding-bottom:140px; }
.brand > div:nth-child(even) { background:#f5f5f5; }
.brand > div h1 { margin:0 auto; padding-top:150px; width:1158px; font-size:80px; line-height:100px; font-weight:700; overflow:hidden; }
.brand > div h1 span { display:block; }*/
.brand .__link { margin:0 auto; margin-top:110px; width:1160px; height:600px; }
.brand .__link:first-child { margin-top:180px; }
.brand .__link:last-child { margin-bottom:240px; }
.brand .__link a { display:flex; width:100%; height:100%; }
.brand .__link.__odd a { flex-direction:row-reverse; }

.brand .__link .__txt { position:relative; width:600px; height:600px; }
.brand .__link .__txt .__box { position:absolute; bottom:30px; right:90px; }
.brand .__link .__txt .__box h2 { margin-left:auto; text-indent:-9999em; }
.brand .__link .__txt .__box .__title { display:flex; flex-direction:column; flex-wrap:wrap; position:relative; color:#000; text-decoration:none; }

.brand .__link.__odd .__txt .__box .__title div { display:flex; justify-content:flex-end; }
.brand .__link .__txt .__box .__title div:nth-child(1) { margin-top:50px; }

.brand .__link .__txt .__box .__title div p { display:inline-block; position:relative; font-size:42px; line-height:64px; letter-spacing:-1.68px; font-weight:600; text-align:right; }
.brand .__link .__txt .__box .__title div p:before { content:''; position:absolute; bottom:2px; right:0; width:100%; height:2px; background:#000; }
.brand .__link .__txt .__box .__title div p:after { content:''; position:absolute; bottom:1px; right:0; width:100%; height:4px; background:#fff; transition:all .3s ease; }
.brand > div:nth-child(even) .__link .__txt .__box .__title div p:after { background:#f5f5f5; }
.brand .__link a:hover .__txt .__box .__title div:nth-child(1) p:after { width:0; }
.brand .__link a:hover .__txt .__box .__title div:nth-child(2) p:after { width:0; transition-delay:100ms; }
.brand .__link a:hover .__txt .__box .__title div:nth-child(3) p:after { width:0; transition-delay:200ms; }
.brand .__link a:hover .__txt .__box .__title div:nth-child(4) p:after { width:0; transition-delay:300ms; }

.brand .__link .__txt .__box .__title .__arrow { position:absolute; bottom:13px; right:-48px; width:40px; height:40px; overflow:hidden; }
.brand .__link .__txt .__box .__title .__arrow i { display:block; position:absolute; bottom:-40px; left:-40px; width:40px; height:40px; background:url(../img/ic_link_arrow.svg) no-repeat center center; animation-name:out; animation-duration:.3s; }
.brand .__link a:hover .__txt .__box .__title .__arrow i { bottom:0; left:0; animation-name:in; animation-duration:.6s; }

@keyframes in {
    0% { bottom:-40px; left:-40px; }
    45% { bottom:-40px; left:-40px; }
    100% { bottom:0; left:0; }
}
@keyframes out {
    from { bottom:0; left:0; }
    to { bottom:40px; left:40px; }
}

.brand .__link .__visual { position:relative; width:560px; height:600px; }
.brand .__link .__visual .__mask { overflow:hidden; width:560px; height:600px; }

.brand .__link.__even .__txt .__box { left:90px; width:510px; }
.brand .__link.__even .__txt .__box h2 { margin-left:0; margin-right:auto; }
.brand .__link.__even .__txt .__box .__title { justify-content:flex-start; }
.brand .__link.__even .__txt .__box .__title p { text-align:left; }


/* loewe */
.loewe.__link .__txt .__box h2 { width:161px; height:37px; background:url(../img/logo_loewe.svg) no-repeat center center; background-size:100% auto; }
.loewe.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_loewe.jpg) no-repeat center 50%; background-size:560px auto; }

/* bulgari */
.bulgari.__link .__txt .__box h2 { width:252px; height:26px; background:url(../img/logo_bulgari.svg) no-repeat center center; background-size:100% auto; }
.bulgari.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_bulgari.jpg) no-repeat center 65%; background-size:600px auto; }

/* vancleef */
.vancleef.__link .__txt .__box h2 { width:288px; height:130px; background:url(../img/logo_vancleef.svg) no-repeat center center; background-size:100% auto; }
.vancleef.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_vancleef.jpg) no-repeat center 57%; background-size:560px auto; }

/* chanel */
.chanel.__link .__txt .__box h2 { width:187px; height:30px; background:url(../img/logo_chanel.svg) no-repeat center center; background-size:100% auto; }
.chanel.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:#fff url(../img/link_chanel.jpg) no-repeat center 50%; background-size:450px auto; }

/* richard */
.richard.__link .__txt .__box h2 { width:289px; height:22px; background:url(../img/logo_richard.svg) no-repeat center center; background-size:100% auto; }
.richard.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_richard.jpg) no-repeat center 50%; background-size:600px auto; }

/* chopard */
.chopard.__link .__txt .__box h2 { width:213px; height:71px; background:url(../img/logo_chopard.svg) no-repeat center center; background-size:auto 100%; }
.chopard.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_chopard.jpg) no-repeat center 50%; background-size:600px auto; }

/* lv */
.lv.__link .__txt .__box h2 { width:279px; height:29px; background:url(../img/logo_lv.svg) no-repeat center center; background-size:100% auto; }
.lv.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_lv.jpg) no-repeat center 0%; background-size:650px auto; }

/* montblanc */
.montblanc.__link .__txt .__box h2 { width:264px; height:33px; background:url(../img/logo_montblanc.svg) no-repeat center center; background-size:100% auto; }
.montblanc.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_montblanc.jpg) no-repeat center 50%; background-size:600px auto; }

/* moet */
.moet.__link .__txt .__box h2 { width:260px; height:51px; background:url(../img/logo_moet.svg) no-repeat center center; background-size:100% auto; }
.moet.__link .__visual .__mask { overflow:hidden; width:560px; height:600px; background:url(../img/link_moet.jpg) no-repeat center 50%; background-size:660px auto; }