@charset "utf-8";

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, strong, sub, sup, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, embed, input, select, textarea, button {margin:0;padding:0;}
body {font-size:1em;line-height:1.428;font-family: 'Nanum Gothic Coding', sans-serif;color:#565d6d;}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-weight:normal;}
input, button, textarea {font-size:1em;font-family: 'Nanum Gothic Coding', sans-serif;}
select {font-size:1em;}
code, pre {font-size:1em;font-family: 'Nanum Gothic Coding', sans-serif;}
address, em, cite {font-style:normal;}
img {border:0 none;}
hr {display:none;}
table {border-collapse:separate;border-spacing:0;}
caption, .hd {width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
th, td {vertical-align:top;text-align:left;font-weight:normal;}
li {list-style-type:none;}
form {margin:0;padding:0;}
fieldset {border:0 none;}
legend, .hd {position: absolute;border:0px;width: 1px;height: 1px;clip: rect(1px, 1px, 1px ,1px);clip-path:inset(50%);overflow: hidden;}
label, button {cursor:pointer;}
button {overflow:visible;border:none;background:none;background:transparent;font-family:inherit;white-space:nowrap;vertical-align:top;text-decoration:none;*margin-left:4px;}
button::-moz-focus-inner {border:0;padding:0;}
a:link {color:#565d6d;text-decoration:none;*cursor:pointer;}
img{vertical-align: top}
textarea:focus, input:focus{outline: none;}

html, body{min-height: 100%;height: 100%;overflow:hidden;-webkit-tap-highlight-color: transparent;}

/* Landscape mode 가로일때 */
@media only screen and (orientation: landscape) {
    #portrait {display: none;}
    #landscape{display:block;}
}

/* Portrait mode 세로일때 */
@media only screen and (orientation: portrait) {
    #portrait {display: block;}
    #landscape{display:none;}
}
#portrait {
  position: relative;
  z-index: 999;
}
#portrait .ptBg {
  width:100%; height:100vh;
}
#portrait .cont {
  position: fixed;
  left: 50%; top: 0;
  max-width: 640px;
  width: 100%; height: 100%;
  transform: translateX(-50%);
}
#portrait .cont .ptImg1 {
  display: block;
  position: relative;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}
#portrait .cont .ptImg2 {
  display: none;
  width: 100%;
  margin: 0 auto;
}
#portrait .cont .ptImg3 {
  display: none;
  position: absolute;
  right: 8.3%; bottom: 3.8%;
  width: 21.44%;
}
#portrait .cont.rs .ptImg1 {
  display: none;
}
#portrait .cont.rs .ptImg2,
#portrait .cont.rs .ptImg3 {
  display: block;
}


/* main */
.loading{
  position:absolute;
  width:100%;height:100%;
  background: url('https://storage-ncloud.artistchai.co.kr/chaiverse/images/loadingbg.png') center top no-repeat; background-size: cover;
}
.star{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  margin-left:-38px;
  margin-top:-20px;
}

@-webkit-keyframes star {
  from{
      -webkit-transform: rotate(0deg);
  }
  to{
      -webkit-transform: rotate(360deg);
  }
}

.star {
  -webkit-animation: star 5s linear infinite;transform-origin: 42px 44px;
}
#container{
  display:none;
}


.logo-wrap .mask {
  display: none;
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.9);
}
.logo-wrap .mask .txtWrap>div {
  position: absolute;
}
.logo-wrap .mask .txtWrap .lt {
  left: 80px; top: 80px;
}
.logo-wrap .mask .txtWrap .lt img {
  width: 317px;
}
.logo-wrap .mask .txtWrap .lb {
  left: 82px; bottom: 95px;
}
.logo-wrap .mask .txtWrap .lb img {
  width: 467px;
}
.logo-wrap .mask .txtWrap .rt {
  right: 106px; top: 75px;
}
.logo-wrap .mask .txtWrap .rt img {
  width: 300px;
}
.logo-wrap .mask .txtWrap .ct {
  left: 50%; top: 50%;
  margin-left: -227px;
  transform: translateY(-50%);
}
.logo-wrap .mask .txtWrap .ct img {
  width: 454px;
}
.mobile .logo-wrap .mask .txtWrap>div {
  transform: scale(.5);
}
.mobile .logo-wrap .mask .txtWrap .lt {
  left: 50px; top: 55px;
  transform-origin: left top;
}
.mobile .logo-wrap .mask .txtWrap .lb {
  left: 22px; bottom: 55px;
  transform-origin: left bottom;
}
.mobile .logo-wrap .mask .txtWrap .rt {
  right: 51px; top: 50px;
  transform-origin: right top;
}
.mobile .logo-wrap .mask .txtWrap .ct {
  transform-origin: top;
  transform: scale(.5) translateY(-46%) !important;
}
@media (max-width: 1000px), (max-height: 650px) {
  .logo-wrap .mask .txtWrap>div {
    transform: scale(.8);
  }
  .logo-wrap .mask .txtWrap .lt {
    transform-origin: left top;
  }
  .logo-wrap .mask .txtWrap .lb {
    transform-origin: left bottom;
  }
  .logo-wrap .mask .txtWrap .rt {
    transform-origin: right top;
  }
  .logo-wrap .mask .txtWrap .ct {
    transform-origin: top;
    transform: scale(.8) translateY(-50%) !important;
  }
}



.logo-wrap .top{
  position:fixed;
  top:25px;
  left:30px;
}
.mobile .logo-wrap .top{
  top:10px;
  left:10px;
  width: 45px;
}
.mobile .logo-wrap .top img{
  width: 100%;
}



.logo-wrap .left-bottom{
  position:fixed;
  bottom:26px;
  left:43px;
}
.logo-wrap .left-bottom img{
  width: 183px;
}
.mobile .logo-wrap .left-bottom{
  bottom:10px;
  left:10px;
}
.mobile .logo-wrap .left-bottom img{
  width:140px;
}

.logo-wrap .left-bottom .btnSns {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 116px;
}
.mobile .logo-wrap .left-bottom .btnSns {
  width: 90px;
}

.logo-wrap .left-bottom .btnSns li {
  position: relative;
  float: left;
  width: 24px;
  height: 23px;
  margin-right: 6px;
}
.mobile .logo-wrap .left-bottom .btnSns li {
  width: 19px;
  height: 18px;
  margin-right: 3.5px;
}
.logo-wrap .left-bottom .btnSns li:last-child {
  width: 26px;
  margin-right: 0;
}
.mobile .logo-wrap .left-bottom .btnSns li:last-child {
  width: 21px;
  margin-right: 0;
}
.logo-wrap .left-bottom .btnSns li a {
  position: absolute;
  text-indent: -9999em;
  display: block;
  width: 100%;
  height: 100%;
}

.logo-wrap .right-bottom{
  position:fixed;
  bottom:25px;
  right:30px;
}
.mobile .logo-wrap .right-bottom{
  bottom:10px;
  right:10px;
}
.mobile .logo-wrap .right-bottom img{
  width:80px;
}

.logo-wrap{
  display:none;
  z-index:1;
}
.mouse{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-77px;
  margin-top:-42px;
  z-index:1;
}
.mouse img{
  position:absolute;
}
.progress{
  position:absolute;
  top:50%;
  left:50%;
  width:23px;
  z-index: 1;
  text-align: center;
  color:white;
  margin-left:-8px;
  margin-top:13px;
  font-size:12px;
}

.floating {
  position: fixed;
  top: 0;
  right: 41px;
  width: 170px; height: 44px;
}
.mobile .floating {
  right: 10px;
  width: 125px; height: 32px;
}
.floating a {
  display: block; width: 100%; height: 100%;
}
.floating img {
  width: 100%;
}


/* layer */
.layerWrap {
  display: none;
  overflow-y: auto;
  position: fixed; left: 0; top: 0;
  width: 100%; height: 100%;
}
.layerWrap#layerTrend img {
  width: 100%;
}
.layerWrap#layerTrend .inner {
  position: relative;
  height: 100%; min-height: 785px;
}

.layerWrap#layerTrend .layer-bg {
  overflow: hidden;
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: url('https://storage-ncloud.artistchai.co.kr/chaiverse/images/trend/bg.png') center top no-repeat; background-size: 100% 100%;
  z-index: -1;
}
.layerWrap#layerTrend .layer-bg .crossWrap {
  width: 100%; min-width: 800px; height: 100%;
}
.layerWrap#layerTrend .layer-bg .cross {
  float: left;
  display: block;
  width: 16.666%;
  height: 25%;
  text-align: center;
}
.layerWrap#layerTrend .layer-bg .cross span {
  position: relative; top: 50%;
  display: inline-block;
  width: 87px; height: 87px; min-width: 47px; min-height: 70px;
  background: url('https://storage-ncloud.artistchai.co.kr/chaiverse/images/trend/cross.png') no-repeat; background-size: 100%;
  transform: translateY(-50%);
  opacity: 0;
}
.layerWrap#layerTrend .layer-bg .cross:nth-child(4n-3) span {
  animation: crossAni 1.8s .1s linear infinite;
}
.layerWrap#layerTrend .layer-bg .cross:nth-child(4n-2) span {
  animation: crossAni 1.5s .3s linear infinite;
}
.layerWrap#layerTrend .layer-bg .cross:nth-child(4n-1) span {
  animation: crossAni 1.8s .6s linear infinite;
}
.layerWrap#layerTrend .layer-bg .cross:nth-child(4n) span {
  animation: crossAni 1.5s .9s linear infinite;
}
@keyframes crossAni {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}

.layerWrap#layerTrend .layer-cont {
  position: absolute; left: 0; top: 50%;
  width: 100%;
  transform: translateY(-49%);
}
.layerWrap#layerTrend .layer-cont .title {
  width: 749px;
  margin: 0 auto 117px;
  text-align: center;
}
.layerWrap#layerTrend .layer-cont .title p {
  margin: 0 auto;
}
.layerWrap#layerTrend .layer-cont .title .tit2 {
  max-width: 350px;
  width: 44.53%;
  padding-top: 11px;
}

.layerWrap#layerTrend .layer-cont .contents {
  overflow: hidden;
  margin-left: 114px;
}
.layerWrap#layerTrend .layer-cont .contents .box {
  position: relative;
  max-width: 350px;
  width: 350px; height: 384px;
  margin: 0 12.5px;
  padding: 21px 17px 67px;
  background: url('https://storage-ncloud.artistchai.co.kr/chaiverse/images/trend/box.png') no-repeat; background-size: 100%;
  color: #000;
  opacity: 0;
  transform: translateX(100px);
}
.layerWrap#layerTrend .layer-cont .contents .box::before {
  position: absolute; left: 0; bottom: 0; content: '';
  width: 100%; height: 14.535%; max-height: 67px;
  background: url('https://storage-ncloud.artistchai.co.kr/chaiverse/images/trend/boxReflection.png') no-repeat; background-size: 100%;
}
.layerWrap#layerTrend .layer-cont .contents .box .img {
  width: 100%; height: 230px;
}
.layerWrap#layerTrend .layer-cont .contents .box .tit {
  padding: 18px 0 8px;
  font-size: 16px;
  letter-spacing: -1.1px;
}
.layerWrap#layerTrend .layer-cont .contents .box .date {
  position: absolute; left: 18px; top: 349px;
  font-size: 12px;
}
.layerWrap#layerTrend .layer-cont .contents .box .btn {
  position: absolute; right: 3.7%; top: 72.3%;
  width: 6.1%; height: 5%;
}

.layerWrap#layerTrend .layer-cont .btnClose {
  position: absolute; top: 237px; right: 9.5%;
  width: 125px; height: 19px;
  background: url('https://storage-ncloud.artistchai.co.kr/chaiverse/images/trend/btnClose.png') no-repeat; background-size: 100%;
}
.layerWrap#layerTrend .layer-cont .btnClose a {
  position: absolute;
  display: block;
  width: 100%; height: 100%;
  text-indent: -999em;
}

.layerWrap#layerTrend .contact {
  position: absolute;
  right: 3%; bottom: 2.7%;
}
.layerWrap#layerTrend .contact a.mail {
  position: absolute;
  left: 6%; bottom: 0;
  color: #0554b6;
  font-size: 13.5px;
  line-height: 17px;
  letter-spacing: -.35px;
  text-decoration: underline;
}

.mobile .layerWrap {
  overflow: hidden;
}
.mobile .layerWrap#layerTrend .inner {
  min-height: auto;
}
.mobile .layerWrap#layerTrend .layer-bg .cross {
  transform-origin: center;
  transform: scale(.65);
}
.mobile .layerWrap#layerTrend .layer-cont {
  padding-top: 3%;
  transform: translateY(-45%);
}
.mobile .layerWrap#layerTrend .layer-cont .title {
  margin: 0 auto 77px;
  transform-origin: center;
  transform: scale(.7);
}
.mobile .layerWrap#layerTrend .layer-cont .contents {
  overflow: visible;
  margin-left: 7px;
  transform-origin: left top;
  transform: scale(.54);
}
.mobile .layerWrap#layerTrend .layer-cont .btnClose {
  width: 75px; height: 12px;
}
.mobile .layerWrap#layerTrend .contact {
  right: 2.3%;
  transform-origin: right bottom;
  transform: scale(.7);
}
@media (max-height: 700px) {
  .mobile .layerWrap#layerTrend .layer-cont .title {
    display: none;
  }
  .mobile .layerWrap#layerTrend .layer-cont {
    transform: translateY(-26%);
  }
  .mobile .layerWrap#layerTrend .layer-cont .btnClose {
    top: 0;
  }
}



@media (min-width: 501px)  {
  .layerWrap#layerTrend .layer-cont .contents .box {
    width: 350px !important;
  }
}
@media (max-width: 800px)  {
  .layerWrap#layerTrend .layer-bg .cross span {
    width: 50.26%; height: 24.82%;
  }
  .layerWrap#layerTrend .layer-cont .title {
    width: 100%;
  }
  .layerWrap#layerTrend .layer-cont .contents {
    margin-left: 2%;
  }
  .layerWrap#layerTrend .layer-cont .contents .box .img {
    height: auto;
  }
  .layerWrap#layerTrend .layer-cont .btnClose {
    right: 3%; top: 27%;
    width: 15.625%; height: 2.448%;
  }
}
@media (max-width: 500px)  {
  .layerWrap#layerTrend .layer-cont .contents .box {
    height: auto;
    margin: 0 2%;
    padding: 4.9% 3.8% 30.5%;
  }
  .layerWrap#layerTrend .layer-cont .contents .box .tit {
    padding: 5% 0 2.6%;
    font-size: 3.2vw;
  }
  .layerWrap#layerTrend .layer-cont .contents .box .date {
    left: 4.8%; top: 74%;
    font-size: 2.4vw;
  }
  .layerWrap#layerTrend .layer-cont .contents .box .btn {
    top: 72%;
  }
}