@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;1,100&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


/* *{outline: 1px solid #f00;} */

:root {
  /* color */
  --bc: #000000;
  --wc: #ffffff;
  --gc1: #cccccc;
  --dc1: #222222;
  --dc2: #444444;
  --main-c: #F0BD00;
  
  /* Font size */
  --f-title: 60px; 
  --f-s-title: 30px;
  --f-large: 26px;
  --f-medium: 1rem;
  --f-medium2: 18px;
  --f-small: 16px;

 /* Font family */
  --Noto:'Noto Sans KR', sans-serif; 
}

html{font-size: 20px;}
body {font-size: var(--f-small); text-align: center; font-family: var(--Noto); background: #EEEAE6;}
.container {width: 72rem; margin: 0 auto;}

.section .title{font-size: var(--f-title);font-weight: 700;margin-bottom: 1rem;text-transform: uppercase;}
.section .title-desc {font-size: var(--f-medium); font-weight: 200; line-height: 1.4; color: var(--wc); letter-spacing: -0.02em; margin-bottom: 1rem;}
section p {font-weight: 300; line-height: 1.4;}

.read-more {display: block;margin: 0 auto; padding: 0.5rem 1rem; width: 7rem; background: var(--dc1); text-transform: uppercase; transition: 0.5s;}
.read-more:hover {background: var(--main-c);}

  /* 헤더*/
.header {z-index: 999;}
.header h1 {position: fixed; top: 1.5rem; left: 1.5rem; z-index: 100;}
.header .right {position: fixed; top: 1.5rem;right: 1.5rem; z-index: 100;}
.header nav {position: fixed; top: 50%;left: 1.5rem;transform: translateY(-50%); z-index: 100;}

  /* 좌측 인덱스 01~05*/
.header nav li { width: 2rem; position: relative;}
.header nav li a {display: block;position: relative; padding: 10px 30px ; color: var(--gc1); font-weight: 800;}
.header nav li.on a {color: var(--dc);}

.header nav li a::after {content: ''; display: block;position: absolute;top: 0; left: 0; transform: translateY(15px); width: 5px; height: 5px; border-radius: 4rem; background: transparent; transition: 0.5s;}
.header nav li.on a::after {background: var(--dc); }

.header nav li::after {content: attr(data-name); position: absolute; top: 0; left: 3.2rem; transform: translateY(12px); font-size: 0.65rem; font-weight: 600; color: #000; opacity: 0; transition: .3s;}
.header nav li:nth-of-type(5)::after { color: var(--gc1); }
.header nav li.on::after{opacity: 1;}

.header .logo figure {display: block; width: 5.2rem; height: 2.5rem; background: url(../img/logo.png)no-repeat center center/cover; }
.header .menu_pop-up {position: absolute;right: 2%; top: 3%; font-size: 2rem; z-index: 999;}

.all_menu {display:none;position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);width:100%;height:100vh; z-index: 99;}
.all_menu .container {display:flex;position:absolute;top:50%;left:50%;transform:translate(-45%,-50%);width:70rem;text-align:left;color:#f2f2f2;font-size:1rem;font-weight:300;}
.all_menu .container>li {flex:1;margin-right: 1rem;}
.all_menu a {display:block;line-height:1.6;}
.all_menu dl dt {font-size:1.5rem;font-weight:700;line-height: 1.2; margin-bottom:1.5rem;}
.all_menu li:nth-child(n+3) dt {margin-bottom: 3rem;}
.all_menu dl dt:after {content:"";display:block;position: absolute; width:0; height:0.1rem;background:var(--main-c);margin:1rem auto;transition:0.5s;}
.all_menu li:hover dt:after {width:3rem;}
.all_menu li dd:hover {color: var(--main-c);}
 

/*  SECTION 01 MAIN--------------- */
.main .container {display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 438px 340px 191px; width: 100%; height: 100vh;}
.main .container .item  {background: #EEEAE6; color: #333;}
.main .container .item:nth-child(1) {grid-row: 1/3;}
.main .container .pr-line ul {display: flex; flex-flow: row wrap;justify-content: space-between; width: 25rem; margin: 30rem 3rem 0; text-align: center;}
.main .container .pr-line ul>li {padding: 1rem;}
.main .container .pr-line ul>li::after {content: ''; display: block; width: 100%; height: 1px; background: #222; transform: scaleX(0);transition: 0.5s ease-in-out; }
.main .container .pr-line ul>li:hover {cursor: pointer;}
.main .container .pr-line ul>li:hover::after {transform: scaleX(1);}
.main .container .item:nth-child(2) {grid-row: 1/3; background: url(../img/main_v1.jpg)no-repeat center/cover; filter: grayscale(1);}
.main .container .item:nth-child(2):hover { filter: grayscale(0);}
.main .container .item:nth-child(3) {background: url(../img/main_v3.jpg);}
.main .container .item:nth-child(4) {text-align: left;  padding: 1rem;}
.main .container .item .brand-info {margin-top: 8rem;}
.main .container .item:nth-child(5) {grid-column: 1/3; background: url(../img/main_v5.jpg);}
.main .container .item:nth-child(6) {background: url(../img/main_v6.jpg);}
 
.main  .brand-info h2{ font-size: 2rem;  font-weight: 700; margin-bottom: 1.75rem; }
.main  .brand-info p {font-weight: 100;line-height: 1.3; margin-bottom: 15px;}

/* SECTION 02 PRODUCT BY SPACE */
.pr_solution {background-color: var(--dc); color: var(--wc);} 
.pr_solution .slide { }
.pr_solution .slide .fp-tableCell {display: flex;justify-content:space-between;padding-top: 200px; width: 1665px; margin-left: auto;}

.pr_solution .slide .text-wrap { text-align: left; text-transform: uppercase; font-family: var(--Noto); z-index: 999;} 
.pr_solution .slide .text-wrap  strong {display: block; font-size: var(--f-medium2); color: var(--wc); font-weight: 500; margin-bottom: 1rem;}
.pr_solution .read-more {margin-left: 0;text-align: center;}
.item-1 {background: url(../img/sec02_main01.jpg)no-repeat center center/cover;}
.item-2 { background: url(../img/sec02_main02.jpg)no-repeat center center/cover;}

.inner-slider {width:1050px; height: 574px; position:relative;  z-index:99;}
.pr_solution .slide .label-wrap {position: absolute; transform:translate(555px,250px) ;}
.pr_solution .slide .label-wrap .page-label{display: block; transform: rotate(-90deg); font-size: 1rem; font-weight: 200;letter-spacing: 0.05em;}
.goods {width:330px; height: 574px; margin-left:15px;} 
.goods img {width: 100%; height: 100%;} 

.fp-controlArrow {bottom: 10% !important;}
.fp-controlArrow.fp-prev {color:#000;}

.fp-controlArrow.fp-prev {left: 75%;top: 90%;width: 50px;height: 101px; border:none;cursor: pointer;display: flex;align-items: center;justify-content: center;color: var(--wc); z-index:10;}
.fp-controlArrow.fp-next {left: 85%;top: 90%;width: 50px;height: 101px; border:none;cursor: pointer;display: flex;align-items: center;justify-content: center;color: var(--wc); z-index:10;}


/* SECTION 03 BRAND STORY */ 
.brand_story { color: var(--dc);}
.brand_story .title-info {display: flex;flex-direction: column; width: 72rem; margin: 0 auto; padding:0 15px; text-align: left; z-index: 999;}
.brand_story .title-info .title{font-size: var(--f-title);font-weight: 900;}
.brand_story .title-info .title-desc {font-size: var(--f-medium2);color:var(--dc2); font-weight: 200; letter-spacing: -.05em; margin-top: 7.5rem; margin-bottom: 0.5rem;}

.brand_story .container {display: flex; justify-content: center;align-items: flex-end; padding: 0 15px;}
.brand_story figure span {display:block; transform: rotate(90deg);position: absolute;top: 0; right: -5%;}
.brand_story figure  {padding:0 52px;}

.brand_story figure .case {display: block; position: relative;overflow: hidden; z-index: 1;}
.brand_story figure .case::after  {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4);opacity: 0; z-index: 1;}
.brand_story figure:hover .case::after  {opacity: 1;}

.brand_story figure .case-text {position: absolute;bottom: 50%; left: 50%;transform: translate(-50%,50%); font-weight: 200;line-height: 1.3; opacity: 0; transition: 0.4s;color: var(--wc); z-index: 2;}
.brand_story figure:hover .case-text {opacity: 1;}
.brand_story .case:hover img {transform: scale(1.1); transition: 0.5s ease-in-out;}
.brand_story .case-text p {display: block; margin-bottom: 1rem;}
.brand_story .read-more {background-color: transparent; border: 1px solid var(--wc);font-size: 14px;width: 6rem; padding:4px 2px;}
.brand_story .read-more:hover {background-color: var(--dc1);border: 1px solid transparent;}
  /* 배경선 */
.brand_story .title-info::before{content: ''; display: block;width: 1px; height: 100%;background-color: var(--gc1); position: absolute;top: 0;} 
.brand_story .title-info::after{content: ''; display: block;width: 1px; height: 100%;background-color: var(--gc1);position: absolute; top: 0; right: 13.2%} 

.brand_story .container figure {position: relative;} 
.brand_story .container figure::before{content: ''; display: block;width: 1px; height: 100vh;background-color: var(--gc1);position: absolute; transform: translateY(-100%);z-index: -1;}
.brand_story .container figure::after{content: ''; display: block;width: 1px; height: 100vh;background-color: var(--gc1);position: absolute; transform: translate(333px,-110%);z-index: -1;}

/* SECTION 04 PRODUCT */
.product_line  { color: #333;}
.product_line .container {padding: 0 15px;}
.product_line .container .title-info {margin-bottom: 30px;}
.product_line .container .title-info strong {color: var(--dc2);}
 
.product_line .catalog {display: flex;} 
.product_line .catalog li {flex: 1; padding-right: 30px;} 
.product_line .catalog li:last-child {padding: 0;} 
.product_line .catalog figure {position: relative; overflow: hidden;}
.product_line .catalog figure img{width: 100%;}
.product_line .catalog figure:after {content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left, transparent,#b38f0ee7 );opacity:0;transition:0.5s;}

.product_line .catalog figure .txt {position:absolute;top:20rem;left:2rem;width:80%;height:100%;text-align:left;color:var(--wc);transition:0.5s;z-index:1;}
.product_line .catalog figure .txt h3 {font-size: var(--f-large);font-weight: 700;}
figure .txt h3:after {content:"";display:block;transform: translateY(-10px); width:2rem;height:0.1rem;background:var(--wc);margin:2rem 0;transition:0.5s;}

.product_line .catalog figure:hover .txt {top:7rem;}
.product_line .catalog  figure:hover .txt h3:after {width:10rem;}
.product_line .catalog  figure:hover::after {opacity: 1;}

/* SECTION 05 STORIES */
.usm_stories .content-wrap{display: flex;}
.usm_stories .content-wrap .bg-wrap{flex: 1; background: url(../img/stroy_main.jpg)no-repeat center center/cover; height: 100vh; color: var(--wc);}
.usm_stories .content-wrap .bg-wrap .title-info {padding:22rem 6rem;}
.usm_stories .content-wrap .bg-wrap .title-info .title-desc {margin-bottom: 2rem; font-size: var(--f-medium);font-weight: 200;} 

.usm_stories .content-wrap .article{flex: 1; display: flex; text-transform: uppercase; margin: 2rem 0;}

.article .RollDiv{flex: 1; width:427px; height:calc(100vh - 4rem); overflow:hidden;padding-left: 2rem;}  
.article .RollDiv>div{overflow:hidden;height:auto;width:427px}
.article .RollDiv>div>a{ float:left; display:block; margin-bottom: 30px;}  
.article .RollDiv>div>a>img{ width:427px; height:auto; margin-bottom:10px;}

.article .RollDiv2{flex: 1; width:427px; height:calc(100vh - 4rem); overflow:hidden; }  
.article .RollDiv2>div{overflow:hidden;height:100vh;width:427px}
.article .RollDiv2>div>a{ float:left; display:block;  margin-bottom: 30px;}  
.article .RollDiv2>div>a>img{ width:427px; height:auto;margin-bottom:10px;}


/* FOOTER */
.footer {position: relative; background: #333;color: var(--wc); padding: 4rem 0; font-size: 1rem; font-weight: 200;}
.footer .container {display: flex; justify-content: space-between; padding: 0 0.75rem;}
 .footer .container ul{display: flex;}
 .footer .container ul li{padding-right: 1rem;} 
 .footer .container ul li:last-child{padding: 0;} 
 .footer .container .sns{font-size: 1.4rem;} 
 
.footer .to-top{ position: fixed; bottom: 3rem; right: 4rem;display: block;width: 80px;border-radius: 50%; padding: 1rem;font-size: 2rem;background-color: var(--wc); color: var(--dc1);opacity: 0.4;  transition: 0.5s ease-in-out; z-index: 2;}
.footer .to-top:hover {background: var(--dc1);color: var(--wc); opacity: 1;}