@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* reset css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; background:transparent; font-family:"Pretendard Variable", Pretendard, sans-serif; letter-spacing:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1 !important; word-break:keep-all}
ol, ul, li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px; padding:0 !important}
html {font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
a {background-color:transparent; color:inherit; text-decoration:none}
a:active, a:hover {outline:0; text-decoration:none}
p {outline:none}
img {border:0}
button {background:inherit; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}
select {font:inherit}
select:hover {cursor:pointer}
textarea {padding:0}
input, select {vertical-align:top; margin-top:0 !important}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}
input[type=number] {-moz-appearance:textfield}

.mb0 {margin-bottom:0 !important}
.width100 {width:100%}
.show500 {display:none}


body {background:url('introBg.png') top center no-repeat; background-size:cover; min-height:100vh; height:100%; padding:1.563vw 1.042vw; box-sizing:border-box}

.inner {max-width:49.479vw; margin:0 auto}

h1 {max-width:15.26vw; margin:0 auto}
h2 {margin-top:0.781vw; font-size:1.979vw; font-weight:900; color:#000; text-align:center}

.intConA {display:flex; align-items:center; margin-top:1.563vw}
.intConA-left {display:block; border:0.052vw solid #001788; border-radius:0.781vw; padding:0.781vw 1.302vw; text-align:center; width:100%; max-width:18.75vw}
.intConA-left-h3 {font-size:1.042vw; font-weight:600; color:#403924; margin-top:0.521vw}
.intConA-left-h4 {font-size:0.938vw; font-weight:400; color:#1C0088}

.intConA-center {z-index:1; margin-left:-2.604vw; background:#799AD5; color:#fff; font-size:0.938vw; font-weight:700; border-radius:1.25vw; display:flex; align-items:center; justify-content:center; width:6.51vw; height:2.344vw; flex-shrink:0}
.intConA-center i {margin-left:0.521vw}

.intConA-right {display:block; border-radius:0.781vw; background:#001788; padding:1.302vw; text-align:center; width:100%; max-width:29.688vw; margin-left:-2.604vw}
.intConA-right-h3 {font-size:1.25vw; font-weight:600; color:#fff; margin-top:0.521vw}
.intConA-right-h4 {font-size:0.938vw; font-weight:400; color:#fff}

.intConB {margin-top:1.042vw}
.intConB-tit {display:flex; align-items:center; justify-content:center; background:#88007A; border-radius:0.781vw 0.781vw 0 0; font-size:1.354vw; font-weight:900; color:#fff; padding:0.781vw; box-sizing:border-box}
.intConB-con {display:flex; align-items:center; justify-content:center; border:0.052vw solid #88007A; border-radius:0 0 0.781vw 0.781vw; font-size:0.938vw; font-weight:400; color:#333; padding:1.042vw 0.781vw; box-sizing:border-box}
.intConB-con > div > p {display:flex}
.intConB-con > div > p > i {flex-shrink:0; width:1.3021vw; color:#880055}

.intConC {display:flex; justify-content:space-between; gap:2.0833vw; margin-top:1.563vw}
.intConC-left, .intConC-right {width:100%; border-radius:0.781vw; overflow:hidden}
.intConC-con {padding:0.781vw 0.781vw 1.042vw 0.781vw; box-sizing:border-box; background:#fff; font-size:1.146vw; font-weight:700; line-height:125%; color:#000; text-align:center}

.btnSite {display:inline-flex; align-items:center; justify-content:center; padding:0.417vw 1.823vw 0.365vw 1.823vw; box-sizing:border-box; font-size:0.781vw; font-weight:700; color:#fff; border-radius:0.521vw; margin-top:0.781vw; transition:.3s}
.btnSite > i {margin-left:0.417vw}
.btnSite-game {background:#CC0066}
.btnSite-game:hover, .btnSite-game:focus {color:#fff; background:#A30029}
.btnSite-graphics {background:#AA166B}
.btnSite-graphics:hover, .btnSite-graphics:focus {color:#fff; background:#71022D}



/* 반응형 */
@media screen and (max-width:1920px) {
	body {padding:30px 20px}

	.inner {max-width:950px}

	h1 {max-width:293px}
	h2 {margin-top:15px; font-size:38px}

	.intConA {margin-top:30px}
	.intConA-left {border:1px solid #001788; border-radius:15px; padding:15px 25px; max-width:360px}
	.intConA-left-h3 {font-size:20px; margin-top:10px}
	.intConA-left-h4 {font-size:18px}

	.intConA-center {margin-left:-50px; font-size:18px; border-radius:24px; width:125px; height:45px}
	.intConA-center i {margin-left:10px}

	.intConA-right {border-radius:15px; padding:25px; max-width:570px; margin-left:-50px}
	.intConA-right-h3 {font-size:24px; margin-top:10px}
	.intConA-right-h4 {font-size:18px}

	.intConB {margin-top:20px}
	.intConB-tit {border-radius:15px 15px 0 0; font-size:26px; padding:15px}
	.intConB-con {border:1px solid #88007A; border-radius:0 0 15px 15px; font-size:18px; padding:20px 15px}
	.intConB-con > div > p > i {width:25px}

	.intConC {gap:40px; margin-top:30px}
	.intConC-left, .intConC-right {border-radius:15px}
	.intConC-con {padding:15px 15px 20px 15px; font-size:22px}

	.btnSite {padding:8px 35px 7px 35px; font-size:15px; border-radius:10px; margin-top:15px}
	.btnSite > i {margin-left:8px}
}
@media screen and (max-width:1024px) {
	.intConA {flex-wrap:wrap; justify-content:center}
	.intConA-left {max-width:100%}
    .intConA-center {margin-left:0; flex-wrap:wrap; text-align:center; padding:15px 0; height:auto; border-radius:15px; margin:10px 0}
    .intConA-center i {margin-left:0; margin-top:5px; width:100%}
    .intConA-center i:before {content:"\f175"}
	.intConA-right {max-width:100%; margin-left:0}
}
@media screen and (max-width:768px) {
	.intConC {flex-wrap:wrap; gap:25px}
	.intConC-left, .intConC-right {width:100%}
}
@media screen and (max-width:600px) {
    h1 {max-width:220px}
    h2 {font-size:28px}
	.intConA-left {padding:10px 25px}
	.intConA-left-h3 {font-size:18px}
	.intConA-left-h4 {font-size:14px}
    .intConA-center {padding:10px 0; font-size:16px}
    .intConA-right {padding:15px 20px}
	.intConA-right-h3 {font-size:20px}
	.intConA-right-h4 {font-size:16px}
    .intConB-tit {font-size:22px}
    .intConB-con {font-size:16px; padding:15px}
    .intConB-con > div > p > i {width:22px}
    .intConC-con {font-size:20px}
	.btnSite {padding:7px 20px 6px 20px; font-size:14px; margin-top:10px}
}
@media screen and (max-width:500px) {
	.show500 {display:block}
}