@charset "utf-8";
/* CSS Document */

/* web font */

/* reset */
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
body {margin: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle; max-width: 100%;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0; text-indent: -9999px;}
i.fas, i.far, i.fab {position: relative; vertical-align: middle; display: inline-block;}
.pc {display: none !important;}
br.only-pc {content: '';}
br.only-pc:after {content: '\00a0';}
div.hidden {position: absolute; left: -9999px;}


/* common  */
body {font-family: 'Noto Sans KR', '나눔고딕', '맑은 고딕', 'malgun gothic', '돋움', 'Dotum', sans-serif; font-weight: 400; font-size: 12px; color: #3b3b3d; background: #ffffff;}
#wrapper {position: relative; overflow: hidden; max-width: 850px; margin: 0 auto; box-sizing: border-box; min-width: 320px; min-height: 100vh;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; font-size: 16px; text-align: center; background: rgba(0, 0, 0, 0.4); color: #ffffff; border-bottom: rgba(255, 255, 255, 0.8); z-index: 100000; transition: top 0.3s;}
#skip-nav:focus {top: 0;}
#header {position: fixed; left: 0; top: 0; width: 100%; height: 60px; z-index: 10000; background: #ffffff; transition: all 0.3s;}
#header.scroll {box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3); background: #ffffff; color: #000000;}
#header h1 {position: absolute; left: 20px; top: 50%; transform: translate(0, -50%); width: 130px; font-size: 18px; z-index: 1200;}
#header a.menu {position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); width: 40px; height: 40px; border-radius: 50px; background: #f17104; color: #ffffff; z-index: 1200; transition: color 0.3s ease-out 0s;}
#header a.menu:before {content: ''; position: absolute; left: 10px; top: 14px; width: 20px; height: 2px; background: #ffffff; transition: transform 0.3s ease-out 0s;}
#header a.menu span {position: absolute; left: 10px; top: 19px; width: 20px; height: 2px; background: #ffffff; overflow: hidden; text-indent: -999px; transition: opacity 0.3s ease-out 0s;}
#header a.menu:after {content: ''; position: absolute; left: 10px; top: 24px; width: 20px; height: 2px; background: #ffffff; transition: transform 0.3s ease-out 0s;}
#header a.menu.close {background: #993eb7;}
#header a.menu.close:before {transform: rotate(45deg) translate(4px, 3px);}
#header a.menu.close span {opacity: 0;}
#header a.menu.close:after {transform: rotate(-45deg) translate(4px, -3px);}
#gnb {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); color: #ffffff; box-sizing: border-box; padding-top: 120px; font-size: 40px; font-weight: 300; left: -100%; overflow: auto;}
#gnb.open {animation: open-gnb 0.5s ease-out 0s 1 normal forwards;}
#gnb.close {animation: close-gnb 0.3s ease-out 0s 1 normal forwards;}
#gnb > ul > li {position: relative; left: 50px;}
#gnb > ul > li + li {margin-top: 25px;}
#gnb > ul > li.on > a {position: relative; color: #993eb7;}
#gnb > ul > li > ul {font-size: 20px; overflow: hidden; margin-top: 10px;}
#gnb > ul > li > ul > li {float: left; width: 50%;}
#gnb > ul > li > ul > li > a {display: block; line-height: 30px;}
#gnb.open > ul > li:nth-child(1) {animation: show-gnb-list 0.5s ease-out 0s 1 normal backwards;}
#gnb.open > ul > li:nth-child(2) {animation: show-gnb-list 0.5s ease-out 0.1s 1 normal backwards;}
#gnb.open > ul > li:nth-child(3) {animation: show-gnb-list 0.5s ease-out 0.2s 1 normal backwards;}
#gnb.open > ul > li:nth-child(4) {animation: show-gnb-list 0.5s ease-out 0.3s 1 normal backwards;}
/* #gnb.open ul li:nth-child(5) {animation: show-gnb-list 0.5s ease-out 0.4s 1 normal backwards;} */
@keyframes open-gnb {
    0% {left: 0; opacity: 0;}
    100% {left: 0; opacity: 1;}
}
@keyframes close-gnb {
    0% {left: 0; opacity: 1;}
    100% {left: 0; opacity: 0;}
}
@keyframes show-gnb-list {
    0% {left: -20px; opacity: 0;}
    100% {left: 50px; opacity: 1;}
}

#main {padding-top: 60px;}

#footer {background: #333333; color: #ffffff; font-size: 13px; padding: 20px 0; text-align: center;}
#footer p.copyright {margin-bottom: 10px;}
#footer ul.link li {display: inline-block; font-size: 13px; color: #aaaaaa;}
#footer ul.link li + li:before {content: '|'; margin: 0 20px; font-size: 11px; color: #999999; position: relative; top: -2px;}
#footer ul.link li a {transition: color 0.3s;}
#footer ul.link li a:hover {color: #993eb7;}


/* 메인화면 */
#home div.visual {position: relative; height: 400px; overflow: hidden;}
#home div.visual ul.slide-bg li {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
#home div.visual ul.slide-bg li img {max-width: 850px; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#home div.visual ul.slide-bg li.show {display: block; animation: main-visual-show 2s ease-out 0s 1 normal forwards;}
#home div.visual ul.slide-bg li.hide {display: block; opacity: 0; animation: main-visual-hide 2s ease-out 0s 1 normal forwards;}
#home div.visual ul.slide-bg li img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%;}
#home div.visual ul.slide-bg:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
#home div.visual h2.slogan {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; color: #ffffff; text-align: center; font-size: 28px; font-weight: 400; box-sizing: border-box; padding: 0 20px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);}
#home div.text {font-size: 18px; text-align: center; padding: 50px 20px;}
@keyframes main-visual-show {
    0% {opacity: 0; transform: rotate(-3deg) scale(1.1);}
    100% {opacity: 1; transform: rotate(0) scale(1);}
}
@keyframes main-visual-hide {
    0% {opacity: 1; transform: rotate(0) scale(1);}
    100% {opacity: 0; transform: rotate(3deg) scale(1.1);}
}

#partner {padding: 50px 0}
#partner h2.title {font-size: 32px; text-align: center; margin-bottom: 30px;}
#partner div.text {position: relative; padding: 50px 0; background: url(/img/main_visual_05.jpg) center center no-repeat;}
#partner div.text:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3);}
#partner div.text p {position: relative; text-align: center; padding: 0 20px; color: #ffffff; font-size: 18px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6); z-index: 10; line-height: 1.6em;}

#game {padding: 50px 0}
#game h2.title {font-size: 32px; text-align: center; margin-bottom: 30px;}
#game ul.game-list {padding: 0 30px;}
#game ul.game-list li {box-sizing: border-box; overflow: hidden; text-align: center; margin-bottom: 60px;}
#game ul.game-list li div.image {position: relative; height: 240px; overflow: hidden; border-radius: 20px;}
#game ul.game-list li div.image > a {display: block;}
#game ul.game-list li div.image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; max-width: 120%; transition: all 0.5s;}
#game ul.game-list li.youtube div.image > a:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 60px; background: url(../images/icon_youtube.png) center center no-repeat; background-size: 100% auto; opacity: 0.6; transition: opacity 0.3s;}
#game ul.game-list li h3.title {font-size: 20px; font-weight: 700; margin: 20px 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#game ul.game-list li p.title {font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#game ul.game-list li p.text {font-size: 13px; margin: 15px 0 15px 0; line-height: 22px; height: 44px; overflow: hidden;}
#game ul.game-list li p.link {overflow: hidden; text-align: center;}
#game ul.game-list li p.link > a {display: inline-block; height: 40px; position: relative; overflow: hidden; text-align: center;}
#game ul.game-list li p.link > a + a {margin-left: 10px;}
#game ul.game-list li p.link > a img {height: 100%;}

#news {padding: 50px 0}
#news h2.title {font-size: 32px; text-align: center; margin-bottom: 30px;}
#news ul.news-list {padding: 0 30px;}
#news ul.news-list li {box-sizing: border-box; overflow: hidden; text-align: center; margin-bottom: 60px;}
#news ul.news-list li div.image {position: relative; height: 240px; overflow: hidden; border-radius: 20px;}
#news ul.news-list li div.image > a {display: block;}
#news ul.news-list li div.image img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; max-width: 120%; transition: all 0.5s;}
#news ul.news-list li.youtube div.image > a:after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 60px; background: url(../images/icon_youtube.png) center center no-repeat; background-size: 100% auto; opacity: 0.6; transition: opacity 0.3s;}
#news ul.news-list li h3.title {font-size: 20px; font-weight: 700; margin: 20px 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#news ul.news-list li p.title {font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#news ul.news-list li p.text {font-size: 13px; margin: 15px 0 15px 0; line-height: 22px; height: 44px; overflow: hidden;}
#news ul.news-list li p.link {overflow: hidden; text-align: center;}
#news ul.news-list li p.link > a {display: inline-block; height: 40px; position: relative; overflow: hidden; text-align: center;}
#news ul.news-list li p.link > a + a {margin-left: 10px;}
#news ul.news-list li p.link > a img {height: 100%;}


#contact {padding: 30px 0 50px 0;}
#contact h2.title {font-size: 32px; text-align: center; margin-bottom: 20px;}
#contact ul.info {text-align: center; margin-bottom: 50px;}
#contact ul.info li {font-size: 14px; color: #777777;}


#google-map {height: 300px;}