@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');
@import url('https://webfontworld.github.io/haenam/haenam.css');
@import url('https://webfontworld.github.io/nixgon/NixgonFonts.css');
@import url('https://webfontworld.github.io/gyeonggi/GyeonggiTitle.css');
@import url('https://webfontworld.github.io/yanolja/YanoljaYache.css');
@import url('https://webfontworld.github.io/NexonFootballGothic/NexonFootballGothic.css');
@import url('https://webfontworld.github.io/tvn/EnjoyStories.css');
@import url('https://webfontworld.github.io/chungbuk/CBNU.css');
@import url('https://webfontworld.github.io/cookierun/CookieRun.css');


/* reset */
* {
    margin: 0;
    padding: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
  }
a {
    text-decoration: none;
    color: #222;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
li, ul, ol {
    list-style: none;
}
img {
    vertical-align: top;
    width: 100%;
}
em {
    font-style: normal;
}

.font01 {
    font-family: NexonLv1Gothic;
    font-weight: 300;
}
.font02 {
    font-family: NanumSquareNeo;
    font-weight: 300;    
}
.font03 {
    font-family: haenam;
    font-weight: 300;    
}
.font04 {
    font-family: nixgon;
    font-weight: 300;    
}
.font05 {
    font-family: NexonFootballGothic;
    font-weight: 300;    
}
.font06 {
    font-family: yanolja;
    font-weight: 300;    
}
.font07 {
    font-family: gyeonggi;
    font-weight: 300;    
}
.font08 {
    font-family: EnjoyStories;
    font-weight: 300;    
}
.font09 {
    font-family: chungbuk;
    font-weight: 300;    
}
.font10 {
    font-family: cookierun;
    font-weight: 300;    
}
/* body */
body {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    color: #fff;
}
body.img01 {
    background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02 {
    background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03 {
    background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04 {
    background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05 {
    background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06 {
    background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07 {
    background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08 {
    background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09 {
    background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10 {
    background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

body.bg01::after {
    background: rgba(121, 35, 35, 0.7);
}
body.bg02::after {
    background: rgba(121, 78, 35, 0.7);
}
body.bg03::after {
    background: rgba(35, 117, 121, 0.8);
}
body.bg04::after {
    background: rgba(35, 81, 121, 0.7);
}
body.bg05::after {
    background: rgba(35, 48, 121, 0.7);
}
body.bg06::after {
    background: rgba(35, 92, 121, 0.7);
}
body.bg07::after {
    background: rgba(35, 38, 121, 0.7);
}
body.bg08::after {
    background: rgba(65, 35, 121, 0.7);
}
body.bg09::after {
    background: rgba(118, 35, 121, 0.7);
}
body.bg10::after {
    background: rgba(121, 35, 94, 0.7);
}