@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(./reset.css);
/* common */
html, body { height: 100%; }

body { position: relative; min-width: 1280px; font-family: 'Noto Sans KR', 'Sans-serif'; font-size: 12px; font-weight: 400; color: #000; }

a { color: #000; text-decoration: none; }
a:hover { color: #333; }

.root { position: relative; overflow: hidden; width: 100%; height: 100%; }

.intro { position: relative; overflow: hidden; width: 100%; height: 100%; }
.intro-col { overflow: hidden; width: 50%; height: 100%; }
.intro-col--left { position: absolute; left: 0; top: 0; z-index: 100; }
.intro-col--right { position: absolute; right: 0; top: 0; z-index: 99; }
.intro-col:hover .intro-bg { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }
.intro-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 1s; }
.intro-bg--influencer { background: #fa4616 url(../img/intro/bg-influencer.jpg) left center; background-size: cover; }
.intro-bg--influencer:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(250, 70, 22, 0.5); }
.intro-bg--advertiser { background: #000 url(../img/intro/bg-advertiser.jpg) right center; background-size: cover; }
.intro-bg--advertiser:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); }
.intro-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; color: #fff; }
.intro-fake { display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.intro-area { display: inline-block; vertical-align: middle; }
.intro-logo { display: inline-block; width: 92px; height: 42px; margin-bottom: 24px; background-image: url(../img/intro/logo.png); background-image: url(../img/intro/logo@2x.png), none; background-repeat: no-repeat; background-size: contain; }
.intro-title { margin-bottom: 20px; font-size: 62px; font-weight: 100; }
.intro-meta { margin-bottom: 24px; min-height: 90px; }
.intro-text { font-size: 18px; font-weight: 100; line-height: 1.5; }
.intro-hashtag { margin-top: 12px; font-size: 40px; font-weight: 100; }
.intro-btn { display: inline-block; *display: inline; *zoom: 1; width: 154px; height: 36px; border-radius: 4px; border: 1px solid #fff; border: 1px solid rgba(255, 255, 255, 0.4); background: #999; background: rgba(255, 255, 255, 0.2); text-decoration: none; }
.intro-btn__text { display: inline-block; font-size: 14px; line-height: 2.5; vertical-align: middle; color: #fff; }
.intro-btn:after { content: ""; display: inline-block; width: 12px; height: 12px; background-image: url(../img/intro/ic-go.png); background-image: url(../img/intro/ic-go@2x.png), none; background-repeat: no-repeat; background-size: contain; vertical-align: middle; }

@supports (-webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%)) and (clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%)) { .intro-col { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }
  .intro-col--left { -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); } }
@media screen and (max-width: 767px) { body { min-width: 320px; }
  .intro-col { width: 100%; height: 50%; }
  .intro-col--left { position: absolute; left: 0; top: 0; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%); }
  .intro-col--right { position: absolute; right: 0; top: auto; bottom: 0; }
  .intro-logo { width: 65px; width: 16.927083333333332vw; height: 30px; height: 7.8125vw; margin-bottom: 15px; margin-bottom: 3.90625vw; }
  .intro-title { margin-bottom: 12px; margin-bottom: 3.125vw; font-size: 28px; font-size: 7.291666666666667vw; }
  .intro-meta { margin-bottom: 15px; margin-bottom: 3.90625vw; min-height: auto; }
  .intro-text { font-size: 11px; font-size: 2.8645833333333335vw; }
  .intro-hashtag { margin-top: 12px; margin-top: 3.125vw; font-size: 18px; font-size: 4.6875vw; }
  .intro-btn { padding: 0 15px; padding: 0 3.90625vw; width: auto; height: auto; }
  .intro-btn__text { font-size: 12px; font-size: 3.125vw; }
  .intro-btn:after { width: 12px; width: 3.125vw; height: 12px; height: 3.125vw; } }

/*# sourceMappingURL=intro.css.map */
