/* reset */
*{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal;}
ul,ol{list-style:none;}
a{text-decoration:none;color:inherit;}
b,strong,dt{font-weight:normal;}
i,em,address{font-style:normal;}
table{border-collapse:collapse;}

/*--------------googlefont---------------
  font-family: 'Roboto Mono', monospace;
  font-family: 'Lexend Deca', sans-serif;
  ----------------------------------------
 */
 @media (min-width:1601px){
  /* layout */
html{
  margin:0 auto;
  font-size:21px;
  overflow-X: hidden;
  scroll-behavior: smooth;
}
.wrap{
  width:100%;
  height:100%;
  margin:0 auto;
  margin-top:6rem;
}
section > h2 {
  font-family: 'Roboto Mono', monospace;
}

/* header */
header{
  width:100%;
  height:6rem;
  background:#fff;
  text-align:center;
  position:fixed;
  top:0;
  left:0;
  z-index: 10000;
  line-height: 140%;
}
header > .logo{
  width:33%;
  position:absolute;
  top:50%;
  left:33.333%;
  transform:translateY(-50%);
}
header .logo img{width:25%;}
header > .menu{
  width:33.333%;
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  }
nav{
  width:300%;
  font-size:18px;
  background:rgba(255,255,255,0.89);
  position:absolute;
  top:3.6rem;
  left:0;
  box-sizing:border-box;
  transition:all 0.6s ease 0s;
  opacity:0;
  pointer-events: none;
}
nav.on{
  height:395px;
  opacity:1;
  pointer-events:auto;
}
nav>ul>li a{
  display:block;
  width:100%;
}
nav>ul>li{
  width:10%;
  color:#f6c9ce;
  text-align:left;
  margin-left:15%;
  margin-top:60px;
  position:relative;
}
nav>ul>li>ul{
  color:black;
  width:500%;
  position:absolute;
  top:0;left:150%;
}
nav>ul>li>ul:after{
  content:"";
  display:block;
  clear:both;
}
nav>ul>li>ul>li{
  float:left;
  margin-right:5%;
}
nav>ul>li>ul>li:hover{
  color:#9a9a9a;
}
nav>ul>li>ul.ko{
  font-family: 'GmarketSansLight';
  line-height:48px;
}
header > .logIn{
  width:33.333%;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-family: 'Roboto Mono', monospace;
  font-weight:100;
  font-size:1.3rem;
  color:#9a9a9a;
  }

/* videoContent */
.videoContent{
  pointer-events:none;
  text-align: center;
}
.videoContent  i{
  display: block;
  margin: 0 auto;
  color:#f6c9ce;
  font-size:1.5rem;
  animation: moveAllow 0.9s 1s Infinite Alternate;
  line-height:50%;
  opacity:0;
}
.videoContent video{
  width:80vw;
  height:70vh;
  object-fit:cover;
  overflow: hidden;
  margin: 2rem 0;
}
/* banner */
.banner{
  height: 60vh;
  padding:4rem;
  position:relative;
  margin-top: 4rem;
}
.banner > h2{
  font-size:0;
}
.slider{
  position:relative;
}
.slider li{
  position:absolute;
  top:0;
  left:0;
  opacity:0;
}
.slider li.on{
  opacity:1;
}
.slider li img{
  width:100%;
  object-fit: cover;
}
.bRound{
  display:flex;
  position:absolute;
  bottom:5%;
  left:50%;
  transform: translateX(-50%);
}
.bRound li span{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #888;
  display: inline-block;
  margin:2rem 10px;
  pointer-events: none;
}
.bRound li.on span{
  background:#f6c9ce;
}
.bRound a{
  display:inline-block;
  width:100%;
}
.controler{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2rem;
  color:#facfd4;
  z-index:100;
}
.controler span{
  margin: 0 1rem;
}
/* contentsBs */
.contentsBs{
  padding:4rem;
  opacity:0;
}
.contentsBs h2{
  font-size:2.5rem;
  margin-bottom: 2rem;
  text-align: center;
  color:#f6c9ce;
  font-family: 'Roboto Mono', monospace;
}
.contentsBsBox{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
}
.contentsBsBox > li{
  width:33.333%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40rem;
  padding: 2rem;
  box-sizing: border-box;
  border-right:4px solid #facfd45e;
  border-bottom:4px solid #facfd45e;;
}
.contentsBsBox > li:nth-of-type(3n){
  border-right:none;
}
.contentsBsBox > .noB{
  border-bottom:none;
}
.contentsBsBox > li figure{
  text-align: center;
  position:relative;
}
.contentsBsBox figure a{
  width:100%;
  display: inline-block;
}
.contentsBsBox figure a img{
  width: 100%;
  object-fit: cover;
  transition:all 0.6s ease 0;
}
.contentsBsBox li:hover figure a img{
  filter:invert(100%) blur(5px);
}
.contentsBsBox .sale{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  opacity:0;
  transition:all 0.6s ease 0s;
  color: #f6c9ce;
  font-size: 1.5rem;
}
.contentsBsBox li.on .sale{
  opacity:1;
}
.bsTxt{
  text-align: center;
  line-height: 160%;
  margin-top: 2rem;
}
.bsTxt > h3{
  font-size: 1.1rem;
}
.saleTxt{
  text-decoration: line-through;
  text-underline-position: from-font;
  color:#fbd8dc;
}
/* project */
.project{
  padding: 4rem;
  background:#000;
}
.project h2{
  font-size:2.5rem;
  color:#fbd8dc;
  margin-bottom:2rem;
  padding-top: 2rem;
  text-align: center;
  position:relative;
}
.project > p{
  color: #fff;
  text-align: center;
  margin: 0 auto;
  word-break: keep-all;
  line-height: 160%;
  font-size: 0.8rem;
  font-weight: lighter;
  margin-bottom: 2rem;
  width: 60%;
  opacity:0;
}
.project h2:before{
  content: "";
  display: inline-block;
  height: 3rem;
  border: 1px solid #fff;
  position: absolute;
  top: -41px;
  left: 50%;
  animation:loger 0.5s ease 0s forwards;
}
.projectRound{
  display:flex;
  justify-content: center;
}
.projectRound a{
  margin: 0 2rem;
  position:relative;
  animation: moveAround 5s linear infinite;
}
.projectRound a:after{
  content:"";
  display:block;
  background:#000;
  width:10rem;
  height:10rem;
  position:absolute;
  top:50%;
  left:50%;
  border-radius:50%;
  transform:translate(-50%, -50%);
}
.projectRound img{
  width:100%;
  object-fit: cover;
}
.projectRound img:after{
  content:"";
  display:block;
  width:4rem;
  height:4rem;
  background:#000;
  position:absolute;
  top:0;
  left:0;
}
.projectRound a:hover img{
  filter:grayscale(1);
}
/* content */
.content{
  width: 100%;
  height: 40rem;
  background: #000;
  padding: 4% 0;
}
.content h2{
  font-size:0;   
}
.content p{
  font-size: 0;
  background: url(../img/content.jpg) 0 -10rem fixed;
  background-size: cover;
  height: 20rem;
}
/* ego */
.ego{
  background: #fff;
  height: 50vh;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ego h2{
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #f6c9ce;
}
.ego h3{
  margin-bottom:2rem;
  font-size:1.5rem;
  position:relative;
}
.ego h3:after{
  content: "";
  display: block;
  height: 3rem;
  border: 0.7px solid black;
  background: #000;
  position: absolute;
  left: 50%;
  top: 150%;
}
.ego p {
  font-size: 1rem;
  padding: 4rem;
  margin: 0 auto;
  text-align: center;
  line-height: 160%;
  word-break: keep-all;
  width: 60%;
  opacity:0;
}
.ego p span{
  font-size:1.1rem;
  font-weight:bold;
}
/* footer */
footer{
  background:#eee;
}
footer h2{
  text-align: center;
  font-size:2rem;
  margin-bottom:2rem;
  color:#f6c9ce;
}
.fT{
  padding:4rem;
}
.fT ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.fT ul > li{
  text-align: center;
  line-height: 160%;
  border: 1px solid #000;
  border-radius: -10%;
  height: 10rem;
  margin: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  font-size: 0.8rem;
  transition:all 1s ease 0;
  background:#eee;
  color:#000;
}
.fT ul > li:hover{
  background:#f6c9ce;;
  color:#fff;
  border:1px solid #f6c9ce;
}
.fT ul > li a{
  display:inline-block;
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fT ul li h4{
  font-size: 1rem;
  margin-bottom: 1rem;
  font-weight: bold;
}
.fB{
  font-size: 0.6rem;
  text-align: center;
  line-height: 240%;
  background: #ccc;
  padding: 2rem 0;
}
}