@charset "utf-8";

.unscrollable {
    overflow: hidden;
    touch-action: none;
}

.center_middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body {
	margin:0;
	font-family:'나눔고딕', NanumGothic, 'Nanum Gothic';
	font-size:20px;
	letter-spacing:-0.3px;
}

ul, li {
	list-style:none;
	margin:0;
	padding:0;
}

input[type=text], input[type=password], input[type=submit] {
    height:40px;
    padding:10px 15px;
    border:0;
    border-radius:5px;
    box-sizing:border-box;
}

#wrap {
	margin:0 auto;
	width:640px;
	height:1136px;
	position:relative;
}

#wrap input[type=checkbox] { width:23px; height:23px;}
#wrap .bgimg { position:absolute; z-index:-3; width:100%;}

/* 초기화면 */
#logo {
	position:absolute;
	display:inline-block;
	top:51px;
	right:54px;
	padding:0;
}

#loader {
	position:absolute;
	display:inline-block;
	top:786px;
	left:339px;
}
#loader .ui-progressbar {
	position:relative;
	height:6px;
	margin-top:-5px;
	border:0;
}
#loader .ui-progressbar-value {
	margin:0;
	border:0;
	background:#ed135a;
}

/* 공통 */
#header {
	width:100%;
	height:118px;
	line-height:0;
	background:rgba(0,0,0,0.5);
}
#header .home { position:relative; text-align:center;}
#header .homemenu {
	position:absolute;
	float:left;
	top:28px;
	left:30px;
}
#header .homelogo {
	display:inline-block;
	margin-top:6px;
}
#header .mb-thumb img {
	width:47px;
	height:47px;
	border-radius:47px;
	border: solid 1px rgba(255,255,255,0.5);
}
#header .login {
	position:absolute;
	float:right;
	top:28px;
	right:30px;
}

#footer {
	position:absolute;
	z-index:-2;
	width:100%;
	bottom:30px;
	text-align:center;
}
#footer .copyright {
	display:inline-block;
	color:#fff;
}
#footer .copy {
	margin-right:15px;
	text-align:right;
	float:left;
}
#footer .icon {
	float:left;
}
#footer .icon li {
	float:left;
	margin-left:4px;
}
#footer .icon img { vertical-align:baseline;}

/* 메인화면 */
#contents {
	padding:54px 33px 0 33px;
	height:852px;
	/*color:#fff;*/
}
#contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6 { color:#fff;}
#contents a:link, #contents a:visited { color:#fff;}
#contents .topimg { margin-bottom:57px; text-align:right;}
#contents .menu { height:554px;}
.menubox { margin-bottom:10px;}
.menu01 { margin-right:20px; float:left;}

/* 서브화면 */
#sub { margin:-54px -33px 0 -33px; text-align:center;}
#sub div { line-height:24px;}

#map { margin-top:27px;}
#map .bgmap {
    z-index:-1;
    position:relative;
}
#map .guide {
	position:absolute;
	top:254px;
	margin-left:543px;
}
#map .back {
	position:absolute;
	top:1038px;
	margin-left:543px;
}
#map .stamp_wrap, #map .button_wrap {
	position:absolute;
	left:19px;
	top:130px;
}
#map .stamp, #map .btn_event {
	position:absolute;
}
#map .btn_event {
    width:28px;
    height:28px;
    border-radius:28px;
}

/* 퀴즈화면 */
#board {
	width:574px; 
	height:958px; 
	margin-left:33px; 
	font-size:20px;
}
#board .title { color:#fff;}
#board .radio01 { background:url(../img/sub/check1_off.png);}

.board { background:url(../img/sub/bg_quiz.png);}
.board01 { background:url(../img/sub/bg_quiz01.png);}
.board02 { background:url(../img/sub/bg_quiz02.png);}
.board03 { background:url(../img/sub/bg_quiz03.png);}
.board04 { background:url(../img/sub/bg_quiz04.png);}
.board05 { background:url(../img/sub/bg_quiz05.png);}

.title { 
	font-size:26px; 
	font-weight:bold; 
	padding:25px 0 10px 0;
}
.number {
    color: #fff;
    margin-bottom: 50px;
}
.title01 { color:#1a5c6d;}
.title02 { color:#474322;}
.title03 { color:#8b002f;}
.title04 { color:#8e4a01;}
.title05 { color:#3a7123;}
.explain { margin:0 60px; padding:5px 0; text-align:left; height:250px; overflow:auto;}
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.2);
}

#event { 
	position:absolute; 
	top:710px;
	width:415px;
	padding:0 79px 0 79px; 
	text-align:left;
}
#event .content {
    text-align: center;
}
#event .info {
    height: 150px;
    margin-bottom: 35px;
    overflow: auto;
    text-align: left;
}
#event_content { 
	position:absolute;
	top:670px;
	width:415px;
	height:360px;
	overflow:auto;
	margin:0 79px;
	text-align:left;
	display:none;
}
#event_content .image {
	margin-top:10px;
}
#event_content .image img {
	max-width:100%;
	max-height:150px;
}
.pad01 { padding-bottom:35px;}
.text01  { text-align:center;}

#choice .answer { cursor:pointer;}
.mar01 { margin:4px 8px 8px 0;}
.fon01{ font-weight:bold;}
.fon02{ color:#F00;}

/* 팝업 */
#popup {
	position:absolute;
	width:640px;
	height:1136px;
	top:0;
	text-align:center;
	background:rgba(0,0,0,.5);
	display:none;
}
#popup .wrap {
	position: relative;
    top: 367px;
	display:inline-block;
}
#popup .content {
	position:relative;
	margin:-400px auto 0 auto;
	width:400px;
	color:#fff;
}
#popup .order {
	text-align:left;
	line-height:26px;
	margin-top:10px;
}
#popup .info {
	width:350px;
	margin: 20px auto;
	margin-top:20px;
	color:#ffe400;
}
#popup .check {
	background:#fff;
	color:#000000;
	width:100px;
	height:30px;
	line-height:30px;
	margin:0 auto;
	border-radius:30px;
}
#popup2 {
	position:absolute;
	width:640px;
	top:367px;
	text-align:center;
	display:none;
}

/* 슬로건 */
#slogan {
	width:475px;
	margin:0 auto;
}
#slogan .headtext {
	font-size:35px;
	margin-bottom:30px;
	color:#fff;
}
#slogan .text_change {
	font-size:50px;
	font-weight:bold;
	color:#fff;
}
#slogan .text_fix {
	font-size:30px;
	margin-left:267px;
	color:#fff;
}

#scan_preview {
    width: 100%;
    height: 100%;
    display: none;
}

.jBox-Modal .jBox-title {
    font-size: 24px;
    font-weight: bold;
    padding: 20px;
}
.jBox-Modal .jBox-content {
    padding: 20px;
}
.jBox-Modal .jBox-content .process {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.jBox-closeButton-title .jBox-closeButton svg {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-right: 0;
}
.jBox-Confirm-footer {
    height: 50px;
    font-weight: bold;
}
.jBox-Confirm-button {
    line-height: 50px;
    height: 50px;
}

.line_dashed { line-height:1px; border-top:1px dashed rgba(255,255,255,0.5); }
.line_solid { line-height:1px; border-top:1px solid rgba(255,255,255,0.5); }