@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Roboto:wght@300;400;500;700;900&family=Nanum+Myeongjo:wght@400;700;800&display=swap');
@font-face {
    font-family: "GmarketSansLight";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GmarketSansMedium";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GmarketSansBold";
    src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff")
        format("woff");
    font-weight: normal;
    font-style: normal;
}

* {
	padding: 0;
	margin: 0;
	box-sizing:border-box;
}
html {font-size:16px;}
body {
	margin:0; padding:0;
	font-family: 'Roboto', 'Noto Sans KR', "Dotum", sans-serif;
	color: #666;
	font-size: 1rem;
	line-height:1.6;
	font-weight:400;
}

b, strong {
	font-weight: 600;
}

div, section {
	margin:0; padding:0;
	font-size:middle;
	}
	
ul, ol, li, dl, dt, dd {
	margin: 0;
	padding: 0;
	list-style: none;
}
a, a:active {
	color:#666; text-decoration:none;
	}
a:hover {
	text-decoration: none;
	color: #36C;
}
img {border:none; padding:0; margin:0;}

button {cursor: pointer;}

.mgl0 {margin-left:0!important;}

#wrap {margin:0; padding:0; width:100%; height:100%;}

.top_area {padding:5px;}
.top_area ul {width:95%; max-width:1000px; margin:0 auto; overflow:hidden; zoom:1; clear:both;}
.top_area ul .logo {float:left; margin-top:2px;}
.top_area ul .go_btn {float:right; margin-top:10px; color:#c3c1c1; font-size:13pxem; font-weight:600; font-family: 'Noto Sans KR', sans-serif; font-weight:400;}
.top_area ul .go_btn a {color:#7f7e7e;}

.main_img {background:#45c9b5;}
.main_img > div {display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center; gap:20px; width:100%; max-width:1000px; height:500px; margin:0 auto; font-size:36px; font-weight:500; color:#eff7ac; line-height:1.2; word-break:keep-all; text-align:center;}
.main_img .txt_wrap {display:flex; flex-direction:column; gap:10px;}
.main_img strong {position:relative; display:block; font-family: "GmarketSansBold"; font-size:58px; font-weight:400; color:#fff; z-index:1;}
.main_img strong:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:22px; background:#e7e86c; z-index:-1;}
.main_img span {display:block; margin-bottom:30px; font-size:1rem;}

.support {padding:0; border-bottom:1px solid #ECECEC; word-break:keep-all;}
.support span {display:block; max-width:1000px; margin:15px auto; font-family: 'Nanum Myeongjo', serif; color:#b3a6a6; font-size:1rem; font-weight:700;}
.support img {display:inline-block; margin-top:-5px; vertical-align:middle;}

#container {width:95%; max-width:1000px; margin:0 auto; padding:20px 0 0 0;}
.cont_text {padding:30px 0 40px; color:#525252; word-break:keep-all; text-align:center;}
.cont_text strong {display:block; margin-bottom:24px; color:#15a08b; font-size:24px; font-weight:700; text-align:center; }
.cont_text p {margin-bottom:24px;}
.cont_text p:last-child {margin-bottom:0;}

.regi_wrap {display:flex; gap:40px; margin-top:60px;}
.regi_wrap dl {width:55%; padding:25px 30px; border:1px solid #a0d5cd; border-radius:20px; text-align:left;}
.regi_wrap dt {display:inline-block; position: relative; margin-bottom:10px; padding-right:10px; font-weight:700; color:#191919; font-size:18px; z-index: 2;}
.regi_wrap dd {position:relative; padding-left:55px;}
.regi_wrap dd:first-of-type {margin-top:22px; margin-bottom:30px;}
.regi_wrap dd span {position:absolute; top:50%; left:0; transform:translateY(-50%);  display:flex; justify-content:center; align-items:center; width:40px; height:40px; background:#45c9b5; border-radius:50px; color:#fff; font-size:14px; font-weight:500; line-height:1;}
.regi_wrap dd strong {font-weight: 700; color:#1c38b2;}
.regi_wrap .btn_wrap {display:flex; flex-wrap:wrap; align-items:flex-top; justify-content:space-between; gap:10px; width:55%;}
.regi_wrap .btn_wrap button {display:flex; align-items:center; justify-content:center; width: calc(50% - 5px); height:80px; border:none; border-radius: 10px; color:#fff; font-weight:500; font-size:1rem; overflow:hidden; line-height:1.2;}
/*.regi_wrap .btn_wrap button:last-child {padding:10px; background:#15a08b;}*/
.regi_wrap .btn_wrap button img {display:block; max-width:100%;}

.cont_text .upload {justify-content:center; padding:20px; border:1px solid #ddd;}
.cont_text .upload button {width: auto; height: 56px; padding: 10px 20px; background: #75350c !important;}
.cont_text .upload img {height: 22px; margin-right: 10px; filter: invert(1);}

.cont_guide {padding:30px 0 10px 0; color:#ca6f1f; text-align:center;}

.news {border:1px solid #ddd; border-radius:5px;-webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1); overflow:hidden;}
.news h3 {padding:15px 25px; background:#ededed; border-bottom:1px solid #ddd; color:#504f4f; font-weight:700;}
.news ul {padding:25px;}
.news ul li {padding:25px 0; border-bottom:1px solid #ddd; color:#666;}
.news ul li:last-child {border-bottom:none;}
.news ul li i {margin-left:10px; color:#878787;}
.news ul li img {display:inline-block; margin-right:10px; vertical-align:middle;}

.eng .main_img strong {font-size:56px;}

#lv-container {margin-top:40px/*100px*/; border-top: 2px solid #333; padding-top: 20px;}


#reple {border-top:2px solid #333;}

#copyright {margin:30px 0 0 0; padding:40px 0; background:#ddd; height:100%; font-size:14px; text-align: center; }
#copyright a {font-weight: bold}

/* Media Query */
/* 태블릿 
@media all and (max-width:1023px){
.top_area ul {width:100%; marign:0 20px;}
.top_area ul .go_btn {float:right; margin-top:15px;}
.main_img {height:172.5px; background-size:auto 100%; background-position:65% 0;}
.main_img p img {width:90%; max-width:420px; margin-top:50px; margin-left:15px;}
.support span {width:95%; margin:10px;}
#container {width:100%; margin:0; padding:0;}
.cont_text .td1 {width:30%;}
.cont_text .box1 ul {padding:10px 0;}
.cont_text .box1 em {width:48%; padding-right:0;}
.cont_text .box1 span {width:100%;}
.cont_text .box1 .game {width:40%!important; padding:0!important;}
.cont_text, .news, .cont_guide {margin:30px 10px; padding:0;}

}*/

/* PC */
@media all and (max-width:1024px){
	.main_img > div {width:95%; margin:0 auto; }
}
@media all and (max-width:768px){
	.top_area, .support, .cont_guide {box-sizing:border-box; padding:0 15px;}
	.main_img {padding-top:60px;}
	.main_img > div {justify-content:flex-end; align-items: center; padding-top:60px; background-position: center top; background-size: auto 70%; text-align: center;}
	.main_img strong:after {left: 50%; transform: translateX(-50%); width: 50%;}

	.support span {padding-left:20px; padding-right:20px;}

	.cont_text {padding: 0 0 20px;}
	.regi_wrap {flex-direction:column;}
	.regi_wrap > * {width:100%!important;}
	.regi_wrap .btn_wrap {justify-content:flex-start;}
	.regi_wrap .btn_wrap button {width: calc(33.33% - 7px);}
	.cont_guide {margin:25px 0 10px 0;}	

	.eng .main_img strong {font-size: 52px;}
}

@media all and (max-width:576px){
	html {font-size:14px;}

	.support img {width: 50px;}
	
	.main_img > div {height:380px; font-size: 18px;}
	.main_img span {margin-bottom:-10px;}
	.main_img strong {font-size:38px;}
	.main_img p {height:260px; padding:0 20px; font-size:26px;}
	#container {padding-top:20px;}
	.support span {padding-left:0; padding-right:0;}
	.cont_text {padding:0;}
	.cont_text dl {padding:15px 20px;}
	.cont_text dt {margin-bottom:0; font-size:16px;}
	.cont_text dd span {font-size:12px;}
	.cont_text .btn_wrap {margin-top:20px}
	.cont_text .btn_wrap button {flex:auto; width: calc(50% - 10px);}
	.regi_wrap {gap: 20px; margin-top: 20px;}
	.regi_wrap dd:first-of-type {margin-top: 10px;  margin-bottom: 10px;}
	.regi_wrap dd span {top: 36%;}
	.regi_wrap .btn_wrap button img {max-width:auto; height: 100%;}

	.eng .main_img strong {font-size:42px;}
	
	#lv-container {margin-top:60px; padding-top:0;}
}

@media all and (max-width:360px){
	.main_img p {height:224px; font-size:24px; line-height:1.2;}
}

.c_color0{background:#AD78B8 !important;}
.c_color1{background:#43B556 !important;}
.c_color2{background:#1c61ad !important;}
.c_color3{background:#CC669B !important;}
.c_color4{background:#da4338 !important;}
.c_color5{background:#dcc050 !important;}
.c_color6{background:#5099dc !important;}
.c_color7{background:#50d7dc !important;}
.c_color8{background:#a7cd33 !important;}
.c_color9{background:#dd802d !important;}

.list ul {padding-top:15px; border-top:1px solid #000;margin-top: 30px;}
.list ul li {display:inline-block; /* margin-left:19px; margin-bottom:40px; */}
.list ul li img {width:147px; height:100px;}


#main-list, #main-list *{box-sizing:border-box;}
#main-list{zoom:1;border-top: 2px solid #000;padding: 30px 0 15px;}
#main-list:after{content:""; display:block; clear:both;}
#main-list li{float: left;width: 16.66666%;}
#main-list li a{display: block;padding: 3px 5px;}
#main-list li a .thumb-img{position: relative;display: block;height: 0;padding-top: 68%;}
#main-list li a .thumb-img img{position: absolute;left:0;top:0;width: 100%;height: 100%;}
#main-list li a strong{display: block;height: 40px;line-height: 20px;word-break: break-all;overflow: hidden;margin-top: 3px;font-size:14px;text-align:center;}
#main-list li a:hover{text-decoration: none;color:#06f}

@media screen and (max-width: 1000px){
	#main-list{padding: 15px 0px;}
	#main-list li{width: 25%;}
}

@media all and (max-width:768px){
	.ph1 {font-size:16px; line-height:1.6;}
	.ph1 .btn {margin-top: 40px;}
	.ph1 em {font-size:14px;}
	#main-list{padding: 15px 0px;}
	#main-list li{width: 50%;}
}
@media all and (max-width:600px){
	#main-list li{width: 100%;}
}

.page {padding:5px 0 30px 0; text-align:center;margin-bottom: 20px;}
.page img {vertical-align:middle;}
.page a, .page strong {color:#333; display:inline-block;width:25px;text-align:center;}
.page a:hover, .page strong{color:#006699; font-weight:600;}
