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

/* reset */
body {margin: 0;}
h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, table {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700;}
header, main, footer, section, article, aside, nav {display: block;}
a {color: inherit; text-decoration: inherit;}
a img {border: none;}
img {vertical-align: middle;}
li {list-style: none;}
address, em, i, cite {font-style: normal;}
table {border-collapse: collapse;}
table caption {overflow: hidden; width: 0; height: 0;}
i.fas, i.far, i.fab {position: relative; vertical-align: middle; display: inline-block;}
.mobile {display: none !important;}
br.only-m {content: '';}
br.only-m: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: 13px; color: #333333; background: #ffffff;}
#wrapper {min-width: 1024px; overflow: hidden;}
#skip-nav {position: fixed; left: 0; top: -41px; width: 100%; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; background: rgba(0, 0, 0, 0.6); border-bottom: 1px solid #ffffff; z-index: 100000; transition: top 0.3s;}
#skip-nav:focus {top: 0;}

#header {position: fixed; left: 0; top: 0; width: 100%; box-sizing: border-box; border-bottom: 1px solid #e0e0e0; background: #ffffff; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2); z-index: 10000;}
#header div.content-box {position: relative; max-width: 1200px; height: 100px; margin: 0 auto; transition: all 0.3s;}
#header.scroll div.content-box {height: 70px;}
#header h1 {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 200px; transition: width 0.3s;}
#header.scroll h1 {width: 160px;}
#header h1 img {width: 100%;}
#gnb {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); font-size: 20px;}
#gnb > ul > li {position: relative; float: left;}
#gnb > ul > li + li {margin-left: 100px;}
#gnb > ul > li > a {position: relative; transition: color 0.3s;}
#gnb > ul > li > a:after {content: ''; position: absolute; left: 50%; transform: translate(-50%, 0); bottom: -5px; width: 0; height: 1px; background: #993eb7; transition: width 0.3s;}
#gnb > ul > li.on > a,
#gnb > ul > li > a:hover {color: #993eb7;}   /* rgba(153, 62, 183, 1) */
#gnb > ul > li.on > a:after,
#gnb > ul > li > a:hover:after {width: 100%;}
#gnb > ul > li > ul {position: absolute; font-size: 15px; background: #ffffff; width: 120px; padding: 15px; border: 1px solid #e0e0e0; top: 40px; box-shadow: 4px 4px 5px 0 rgba(0, 0, 0, 0.6); display: none;}
#gnb > ul > li > ul > li + li {margin-top: 10px;}
#gnb > ul > li > ul > li > a {display: block; transition: color 0.3s;}
#gnb > ul > li > ul > li.on > a,
#gnb > ul > li > ul > li > a:hover {color: #993eb7;}

#main {padding-top: 100px;}

#footer {background: #333333; color: #ffffff; font-size: 16px; padding: 40px 0; text-align: center;}
#footer p.copyright {margin-bottom: 10px;}
#footer ul.link li {display: inline-block; font-size: 14px; 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: 600px; 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.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.2);}
#home div.visual h2.slogan {position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: 100%; color: #ffffff; text-align: center; font-size: 30px; font-weight: 400; box-sizing: border-box; padding: 0 100px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);}
#home div.text {max-width: 1200px; margin: 0 auto; font-size: 24px; text-align: center; padding: 50px 0;}
@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: 100px 0}
#partner h2.title {font-size: 50px; text-align: center; margin-bottom: 60px;}
#partner div.text {position: relative; padding: 100px 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 100px; color: #ffffff; font-size: 24px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6); z-index: 10; line-height: 2em;}

#game {padding: 100px 0}
#game h2.title {font-size: 50px; text-align: center; margin-bottom: 60px;}
#game ul.game-list {max-width: 1000px; margin: 0 auto; overflow: hidden;}
#game ul.game-list li {float: left; width: 50%; padding: 0 30px; margin-bottom: 80px; box-sizing: border-box; overflow: hidden; text-align: center;}
#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-width: 100%; max-width: 120%; transition: all 0.5s;}
#game ul.game-list li div.image > a:hover img {transform: translate(-50%, -50%) scale(1.1) rotate(2deg);}
#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 div.image > a:hover:after {opacity: 1;}
#game ul.game-list li h3.title {font-size: 24px; 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: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#game ul.game-list li p.text {font-size: 14px; margin: 20px 0 20px 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: 50px; position: relative; overflow: hidden; text-align: center;}
#game ul.game-list li p.link > a + a {margin-left: 20px;}
#game ul.game-list li p.link > a img {height: 100%;}



#news {padding: 100px 0}
#news h2.title {font-size: 50px; text-align: center; margin-bottom: 60px;}
#news ul.news-list {max-width: 1000px; margin: 0 auto; overflow: hidden;}
#news ul.news-list li {float: left; width: 50%; padding: 0 30px; margin-bottom: 80px; box-sizing: border-box; overflow: hidden; text-align: center;}
#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-width: 100%; max-width: 120%; transition: all 0.5s;}
#news ul.news-list li div.image > a:hover img {transform: translate(-50%, -50%) scale(1.1) rotate(2deg);}
#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 div.image > a:hover:after {opacity: 1;}
#news ul.news-list li h3.title {font-size: 24px; 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: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#news ul.news-list li p.text {font-size: 14px; margin: 20px 0 20px 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: 50px; position: relative; overflow: hidden; text-align: center;}
#news ul.news-list li p.link > a + a {margin-left: 20px;}
#news ul.news-list li p.link > a img {height: 100%;}

#contact {padding: 30px 0 100px 0;}
#contact h2.title {font-size: 50px; text-align: center; margin-bottom: 50px;}
#contact ul.info {text-align: center; margin-bottom: 50px;}
#contact ul.info li {display: inline-block; font-size: 20px; color: #777777;}
#contact ul.info li + li:before {content: '|'; margin: 0 40px; font-size: 12px; position: relative; top: -3px;}

#google-map {height: 500px;}







/*
animation 축약 표현
animation: main-bg-animation 3s ease-out 0.1s 1 normal forwards running;
animation: name duration timing-function delay iteration-count direction fill-mode play-state
duration: 0(default), time, initial, inherit
timing-function: ease(default), linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit
deley: 0s(default), time, initial, inherit
direction: normal(default), reverse, alternate, alternate-reverse, initial, inherit
iteration-count: 1(default), number, infinite, initial, inherit
fill-mode: none(default), forwards, backwards, both, initial, inherit
play-state: running(default), paused, initial, inherit  (IE에서는 축약표현에 포함시 동작하지 않음, 별도로 사용)

[최종 사용 예시]
animation: main-bg-animation 3s ease-out 0s 1 normal forwards;
animation-play-state: running;
*/