@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
/* font-family: 'Poiret One', cursive; */
@font-face {
  font-family: 'NeoDunggeunmo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.3/NeoDunggeunmo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{box-sizing: border-box;}
a{text-decoration: none; color: inherit;}
img{display: block; max-width: 100%;}
body{font: 16px / 1.2 'NeoDunggeunmo' ,'Noto Sans KR', "돋움", Dotum, AppleGothic, sans-serif;}

/* HEADER-AREA */
/* header */
.header{
  width: 15%; height: 100%;
  background-color: #ffa1fa;
  position: fixed; left: 0; top: 0; z-index: 10000;
  transition: all .3s;
}
.logo{
  width: 180px; height: 63px;
  margin-left: -90px;
  position: absolute; left: 50%; top: 100px;
}
.logo a{
  display: block;
  width: 100%; height: 63px;
  text-indent: -9999px;
  background: url(../img/logo1.png) no-repeat center center / contain;
}
/* gnb */
.gnb{
  position: absolute; right: 50%; top: 300px;
  transform: translate(50% , 0); /* translate는 w를 몰라도 퍼센티지로 이동시킬 수 있다. 포지션이 left면 음수로 땡기고, right면 양수로 땡겨라 */
  transition: all .3s;
}
.gnb ul{width: 100%;}
.gnb li{
  height: 50px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.gnb ul li a{
  display: block;
  width: 100%; height: 50px;
  padding: 0 30px;
  font-size: 20px; line-height: 50px; text-align: center;
}
.gnb ul li:hover{color: #fff; background-color: #da6bb5;}
/* tnb */
.tnb{
  width: 110px;
  position: absolute; right: 50%; bottom: 50px;
  transform: translate(50% , 0);

  transition: all .3s;
}
.tnb-menu a{
  float: left;
  margin-bottom: 10px;
}
.tnb-menu a:nth-child(2){float: right;}
.tnb .sns li{
  float: left;
}
.tnb .sns li + li{margin-left: 4px;}
.tnb .sns li a{
  display: block;
  width: 34px;
}
.tnb .sns li a i{font-size: 34px;}
/* BAR-AREA */
.bar{
  width: 85%; height: 50px;
  margin-left: 15%;
  line-height: 50px;
  background-color: #000;
  transition: all .3s;
}
.bar .bar-lang{
  float: left;
}
.bar .bar-lang a{
  float: left;
  padding: 0 10px;
  color: #aaa; font-family: 'NeoDunggeunmo';
}
.bar .bar-login{
  float: right;
}
.bar .bar-login a{
  float: left;
  padding: 0 10px;
  color: #ccc; font-family: 'NeoDunggeunmo';
}
.bar .bar-login a:hover{color: #fff;}
.bar .bar-lang a:hover{color: #fff;}
/* MAIN-AREA */
.container{
  width: 85%;
  margin-left: 15%;
  transition: all .3s;
}
.container section{
  float: left;
  width: 20%; height: 260px;
  padding: 30px;
  background-repeat: no-repeat; background-position: center center; background-size: cover;
  position: relative;
}
.container section article{}
.container section.sec1{
  width: 60%; height: 520px;
  font-family: 'Poiret One', 'Noto Sans KR', cursive;
  transform-style : preserve-3d;
}
.container section.sec1 figure{
  width: 109%;
  margin: -49px 0 0 -30px;
}
section.sec2{
  width: 40%;
  color: #e8b7ff; font-size: 50px;
  background-color: #f5ff55;
  position: relative;
}
section.sec2 figure{
  position: absolute; left: 100px; top: 200px; z-index: 1000;
  transform: rotate(25deg);
}
section.sec2 figure:nth-child(2){left: 350px; top: 100px;}
section.sec3{background-color: #e8b7ff;}
section.sec4{background-image: url(../img/pic2.jpg);}
section.sec5{background-image: url(../img/pic3.jpg);}
section.sec6{
  overflow: hidden;
  width: 40%;
  background-color: #4537ff;
}
.container section.sec6 article{
  width: 650px;
  margin: 0 auto 0 -20px; padding-left: 10px;
  font-size: 100px; color: #4537ff; font-family: 'NeoDunggeunmo';
  background-color: #f5ff55;
  perspective: 1000px;
  transform: rotate(-25deg);
  animation: ani01 5s linear infinite;
}
@keyframes ani01{
  0% { transform: rotateY(0) rotateX(-25deg) rotateZ(0deg); }
  100%  { transform:rotateY(360deg) rotateX(360deg) rotateZ(90deg);; }
}
section.sec8{background: url(../img/haribo.png) no-repeat center center / cover;}
section.sec9{
  width: 40%;
  text-indent: -9999px;
  background-image: url(../img/newjeans.jpg);
}
section.sec10{}
section.sec11{}
section.sec12{background-color: #4537ff;}



/********** **********
max-width : 1400px
********** **********/
@media(max-width : 1400px) {
  /* HEADER-AREA */
  /* header */
  .header{
    width: 100%; height: 80px;
    position: relative;
  }
  .logo{
    width: 200px; height: 38px;
    margin-left: 0;
    left: 20px; top: 21px;
  }
  .logo a{
    height: 38px;
    background-image: url(../img/logo2.png);
  }
  /* gnb */
  .gnb{
    right: 150px; top: 20px;
    transform: translate(0 , 0);
  }
  .gnb ul{}
  .gnb li{
    float: left;
    height: 40px;
  }
  .gnb ul li a{
    height: 40px;
    font-size: 18px; line-height: 40px;
  }
  /* tnb */
  .tnb{
    width: 90px;
    position: absolute; right: 0; bottom: 5px;
    transform: translate(0 , 0);
  
    transition: all .3s;
  }
  .tnb-menu{float: left;}
  .tnb-menu a{
    float: left;
    margin-bottom: 10px;
  }
  .tnb-menu a:nth-child(2){float: right;}
  .tnb .sns li{
    float: left;
  }
  .tnb .sns li + li{margin-left: 3px;}
  .tnb .sns li a{
    display: block;
    width: 28px;
  }
  .tnb .sns li a i{font-size: 28px;}
  /* BAR */
  .bar{
    width: 100%;
    margin-left: 0;
  }
  /* MAIN */
  .container{
    width: 100%;
    margin-left: 0;
  }
  .container section.sec1 figure{
    width: 110%;
    margin: -49px 0 0 -30px;
  }
  section.sec2 figure{
    width: 20%;
    position: absolute; left: 100px; top: 200px;
    transform: rotate(25deg);
  }
}



/********** **********
max-width : 1024px
********** **********/
@media(max-width : 1024px) {
  /* HEADER-AREA */
  /* gnb */
  .gnb{right: 20px;}
  .gnb ul li a{
    padding: 0 20px;
  }
  /* tnb */
  .tnb{display: none;}
  /* MAIN-AREA */
  .container section{width: 50%; height: 150px;}
  .container section.sec1{width: 100%; height: 300px;}
  .container section.sec3{display: none;}
  .container section.sec7{display: none;}
  .container section.sec12{display: none;}
  .container section.sec1 article{
    display: none;
  }
  .container section.sec1 figure{
    display: none;
  }
  .container section.sec1 article::after{content: "";
    display: none;
  }
  section.sec2 figure{
    display: none;
  }
  section.sec2{
    color: #fff; font-size: 30px;
    background-color: #4537ff;
  }
}




/********** **********
max-width :640px
********** **********/
@media (max-width : 640px) {
  /* HEADER-AREA */
  /* header */
  .header{background-color: transparent;}
  .logo{
    width: 180px; height: 136px;
    margin-left: -90px;
    position: absolute; left: 50%; top: 30px;
  }
  .logo a{
    height: 136px;
    background-image: url(../img/logo3.png);
  }
  /* gnb */
  .gnb{
    width: 250px;
    right: 50%; top: 200px;
    transform: translate(50% , 0); /* translate는 w를 몰라도 퍼센티지로 이동시킬 수 있다. 포지션이 left면 음수로 땡기고, right면 양수로 땡겨라 */
  }
  .gnb li{
    float: none;
    height: 50px;
    margin-bottom: 20px;
    transition: all .3s;
  }
  .gnb ul li a{
    width: 100%; height: 50px;
    padding: 0;
    border-radius: 10px;
    line-height: 50px; text-align: center; color: #fff;
    background-color: rgba(0,0,0,0.3);
    transition: all .3s;
  }
  .gnb ul li:hover{
    border-radius: 10px;
    background-color: rgba(0,0,0,0.9);
    transform: scale(1.2); color: #f90;
  }
  /* MAIN-AREA */
  .container section{display: none;}
  .container section.sec1{
    display: block;
    height: 100%;
    position: fixed; left: 0; top: 0;
  }
  .container section.sec1 article{display: none;}
}