* {
    padding:0;
    margin:0;
    list-style:none;
    text-decoration:none;
}
.background {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
.inner { 
    width:1600px; height:100%;
    margin:0 auto;
    position:relative;
}
.section { font-family: 'Oswald', sans-serif; }

#main {
    width:100%;
    overflow-x:hidden;
}
.section{
    position:relative;
    overflow: hidden;
}
/* s:banner */
#main .banner { height: 100vh; }
#main #thelook { height:102%; }
#main .banner .txt {
  position:absolute;
  left:8%; top:50%;
  transform: translate(-8%,-50%);
  z-index:99999;
  height: auto;
}
#main .banner h2 {
  font-size:95px;
  font-weight:600;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
  line-height:1.3;
  transition:all .5s;
  color: #fff;
  padding:15px 0;
  text-shadow: 1px 5px 10px rgba(17, 17, 17, 0.384);
  /* background: linear-gradient(to top, rgba(255, 255, 255, 0.725),rgb(103, 103, 103));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}
#main .banner h2 b { font-weight: 600; color:#111; font-family: 'Oswald', sans-serif; }
#main .banner em {
  font-style: normal;
  font-size:18px;
  font-weight: 400;
  letter-spacing:2px;
}
@-webkit-keyframes scroll-ani {
  0% {
      opacity: 1;
      top: 29%;
  }
  15% {
      opacity: 1;
      top: 50%;
  }
  50% {
      opacity: 0;
      top: 50%;
  }
  100% {
      opacity: 0;
      top: 29%;
  }
}

@-moz-keyframes scroll-ani {
  0% {
      opacity: 0.8;
      top: 27%;
  }
  15% {
      opacity: 1;
      top: 55%;
  }
  50% {
      opacity: 0;
      top: 55%;
  }
  100% {
      opacity: 0;
      top: 27%;
  }
}

@keyframes scroll-ani {
  0% {
      opacity: 0.8;
      top: 27%;
  }
  15% {
      opacity: 1;
      top: 55%;
  }
  50% {
      opacity: 0;
      top: 55%;
  }
  100% {
      opacity: 0;
      top: 27%;
  }
}
.mouse-scroll {
  display: inline-block;
  line-height: 10px;
  font-size: 14px;
  color: #111;
  letter-spacing: 2px;
  text-decoration: none;
  position: absolute;
  right: 35px; bottom: 40px;
  z-index:9999999999999;
}
.mouse {
  position: relative;
  display: block;
  width: 19px; height: 35px;
  margin: 0 auto 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid #1118;
  border-radius: 23px;
}
.mouse-movement { 
  position: absolute;
  display: block;
  top: 29%; left: 48%;
  width: 6px; height: 6px;
  margin: -4px -3px;
  border:2px solid #1118;
  border-radius: 50%;
  -webkit-animation: scroll-ani 1s linear infinite;
  -moz-animation: scroll-ani 1s linear infinite;
  animation: scroll-ani 1s linear infinite;
}
.mouse-message { 
  float: left;
  font-size:14px;
  letter-spacing: -0.1px;
  padding: 0;
  -webkit-animation: scroll-ani 1s linear infinite;
  -moz-animation: scroll-ani 1s linear infinite;
  animation: scroll-ani 1s linear infinite;
}
#holder {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  z-index: 1;
}
/* e:banner */

/* s:section1 */
#main .section1 .content {
  width:100%; height:100%;
}
#main .section1 .content ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#main .section1 .content ul li {
  height: 480px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding-left:100px;
  position:relative;
  transition:all .3s;
}
#main .section1 .content ul li:nth-child(1):hover::before { background:#fff url("../img/main/main_wave.png") center center/cover no-repeat; }
#main .section1 .content ul li:nth-child(2):hover::before { background:#fff url("../img/main/main_wave.png") center center/cover no-repeat; }
#main .section1 .content ul li:nth-child(3):hover::before { background:#fff url("../img/main/main_wave.png") center center/cover no-repeat; }
#main .section1 .content ul li:nth-child(4):hover::before { background:#fff url("../img/main/main_wave.png") center center/cover no-repeat; }
#main .section1 .content ul li::before {
  content:'';
  width:100%; height:100%;
  position:absolute;
  left:0; top:0;
  background:#fff9;
  transition:all .3s;
}
#main .section1 .content ul li:nth-child(1) { background:url("../img/main/main_content(1).jpg") center center/cover no-repeat; }
#main .section1 .content ul li:nth-child(2) { background:url("../img/main/main_content(2).jpg") center center/cover no-repeat; }
#main .section1 .content ul li:nth-child(3) { background:url("../img/main/main_content(3).jpg") top center/cover no-repeat; }
#main .section1 .content ul li:nth-child(4) { background:url("../img/main/main_content(4).jpg") center center/cover no-repeat; }
#main .section1 .content ul li a { 
  display: block;
  position:inherit;
  z-index: 999;
}
#main .section1 .content ul li h2 {
  font-size:25px;
  color:#111;
}
#main .section1 .content ul li .more {
  display: block;
  width:90px; height:30px;
  font-size:15px; 
  background:url("../img/main/main_arrow.png") center center/cover no-repeat;
  margin-top:50px;
  position:inherit;
  z-index: 99;
  transition:all .5s;
}
#main .section1 .content ul li:hover .more { margin-left:50px; }
/* e:section1 */

@media all and (max-width:1600px) {
  .inner { width:90%; }
}
@media all and (max-width:1200px) {
  #main .banner h2 { font-size:80px; }
  #main .banner em { font-size:16px; } 
  #main .banner .txt {
    left:50%; top:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
  }
}
@media all and (max-width:980px) {
  .mo { display: none; }
  #holder,
  #main .banner { height: 80vh; }
  #main .banner h2 { font-size:60px; }
  #main .banner em { font-size:16px; } 
  #main .section1 .content ul { grid-template-columns: 1fr; }
  #main .section1 .content ul li { height: 350px; }
}
@media all and (max-width:600px) {
  #main #thelook { display: none; }
  #main .banner { height: 55vh; background:url("../img/main/main_banner.jpg") center center/cover no-repeat; }
  #holder { height: 55vh; display: none; }
  #main .banner h2 { font-size:24px; }
  #main .banner em { font-size:14px; }
  .mouse { width: 14px; height: 28px; }
  .mouse-scroll { right:20px; bottom:20px; }
  #main .section1 .content ul li { padding-left:50px; }
  #main .section1 .content ul li h2 { font-size:20px; padding-left:10px; }
  #main .section1 .content ul li .more { transform: scale(0.8); }
}