/*** COMMON LAYOUT ***/
html.hidden,
body.hidden { height: 100%; overflow-y: hidden;}

#layoutWrap { position: relative; min-height: 100vh; display: flex; flex-direction: column; min-width: 350px; max-width: 768px; margin: 0 auto; }
#icontentsWrap, #contentsWrap { position: relative; font-size: 1.6rem; flex: 1; background: #efefef; }
#indexArea, #contentsArea { position: relative; }
#indexArea { padding-top: 0; }

@media all and (max-width: 768px) {
	#layoutWrap { min-width: 320px; }
}

/* 준비중 */
.ing { position: relative; width: 100%; max-width: 768px; margin: 0 auto; padding: 0 15px; text-align: center; color: #fff; font-size: 1.3rem; background: #e45a4c;}

/* header */
header {position: relative;	width: 100%; padding: 0 20px; border-top: 1px solid #e3e3e3; background: #fff;}
header h1 { width: 100%; padding: 10px 0 10px; min-height: 66.5px; font-size: 0; }
header h1 img {display: inline-block;  margin-top: 10px; width: 150px; vertical-align: top; }
header h1 img.btn_back { margin-top: 15px; width: 30px; }
header h1 .right {float: right; margin-top:7px; font-size: 11px; text-align: center;}
header h1 .right button { margin: 0 7px; font-size: 1.3rem; font-weight: 700; color: #121212;}
header h1 .right button.login,
header h1 .right button.logout { min-width:23px; height:44px; padding-top: 25px; background: url('/img/comm/t_login.png') no-repeat 50% 0/23px; cursor: pointer; vertical-align: top;}
header h1 .right button.logout { background-image: url('/img/comm/t_logout.png');}
header h1 .right button.gps    { margin-left: 8px; min-width:19px; height: 44px; padding-top: 25px; background: url('/img/comm/gps_off.png') no-repeat 50% 0/19px; cursor: pointer; vertical-align: top;}
header h1 .right button.gps.on { background-image: url('/img/comm/gps_on.png');}
header h1 a .back-btn { display: none;}
header > div { position: relative; display: block; width: 100%; height: 80px; margin-top: 14px; font-weight: 400; font-size: 1.4rem; color: #fff; background: url('/img/comm/date-bg.png') no-repeat 0 0/cover; border-radius: 25px;}
header > div img { position: absolute; bottom:0; left: 0; width: 105px; }
header > div div { position: absolute; top: 50%; right: 12px; transform: translate(0, -50%); font-family: 'Ria'; font-size: 1.25rem; line-height: 120%;}
header > div span { font-family: 'Ria'; font-weight: 600; font-size: 1.8rem; color:#ffe957; }

/* 메인상단 */
.loginWrap { position: relative; margin: 18px 20px 0;}
.loginWrap .logout,
.loginWrap .login_info { text-align: center;}
.loginWrap > div strong { display: block; margin-top: -7px; font-size: 1.8rem; margin-bottom: 4px; font-family: 'Ria'; }
.loginWrap > div strong img { width: 25px; margin-right: 5px; vertical-align:middle;}
.loginWrap > div strong b	{ font-family: 'Ria'; }
.loginWrap > div strong b span	{ font-family: 'KyoboHandwriting2019'; font-size: 1.6rem; font-weight: normal; color: #444; letter-spacing: -1px;}
.loginWrap .logout div,
.loginWrap .login_info > div { height: 105px; margin-bottom: 20px; padding: 5px; color: #fff; background: #1d1d1d; border-radius: 25px;}
.loginWrap .logout span    { display: block; line-height: 120%;}
.loginWrap .logout button  { display: block; width: 138px; height: 20px; margin: 15px auto 7px; color: #fffb85; font-weight: 500; line-height: 100%; cursor: pointer; }
.loginWrap .logout button.kakao { background: url('/img/comm/btn_login_kakao.png') no-repeat 0 0/100%; }
.loginWrap .login_info > div   { height: auto; padding: 9px 0 0; color: #fff; background: #1d1d21; border-radius: 25px;}
.loginWrap .login_info span.stit-time { display: block; padding:0 15px 5px; width: 100%; font-size: 1.7rem; font-weight: bold; font-family: 'Ria'; border-bottom:1px solid rgba(255, 255, 255, 0.2); letter-spacing: -1.2px;}
.loginWrap .login_info span.stit-time span { margin-left: 0; font-weight: normal; font-family: 'Ria';}
.loginWrap .login_info > div b { float: left; margin: 0 0 0 25px; color: #a1fe71; font-size: 3.8rem; font-family: 'Ria';}
.loginWrap .login_info button		 { float: right; margin: 14px 25px 0 0; padding:5px 30px 5px 13px; color: #000; font-weight: 700; border-radius: 25px; cursor: pointer;}
.loginWrap .login_info button.mygift { background: #a1fe71 url('/img/comm/btn_mygift.png') no-repeat 0 0; }
.loginWrap .login_info button.mytime { background: #a1fe71 url('/img/comm/ico_arr_black.png') no-repeat 91% 50%/20px; }
.loginWrap .login_info button.memlogout { margin: 0 0 5px 5px; padding: 0 0 0 15px; width: 77px; height: 22px; line-height: 22px; color: #fffb85; font-weight: 500; line-height: 100%; background: #222 url('/img/comm/pop-close.png') no-repeat 7px 50%/12px; cursor: pointer; vertical-align:middle; border-radius: 7px; }
.loginWrap .login_info .my-ranking { clear: both; display: block; padding:5px 15px 2px; width: 100%; font-size: 1.5rem; font-weight: 400; font-family: 'Ria'; border-top:1px dashed rgba(255, 255, 255, 0.2); letter-spacing: -0.7px;}
.loginWrap .login_info .my-ranking strong { display: inline-block; margin-right: 1px; font-weight: bold; font-size: 1.5rem; color: #ffee78;}
.loginWrap .login_info .my-ranking span { position: relative; margin-left: 5px; padding-left: 8px; font-size: 1.45rem; color: rgba(255, 255, 255, 0.7);}
.loginWrap .login_info .my-ranking span::before { position: absolute; content: ''; left: 0; top:7px; width: 5px; height: 5px; background:#ffee78; border-radius: 50%;}

@media all and (max-width: 400px) {
	#layoutWrap { min-width: 320px; }
}

/* content_map */
.tab_map {position: relative;}
.tab_map .map_guide { padding: 15px;}
.tab_map .map_guide ul li { position: relative; padding-left: 18px; font-size: 1.5rem; }
.tab_map .map_guide ul li::before {content: "※"; position: absolute; top:0; left: 0; }
#kakaoMap { width:100%; height:350px; margin-top: 5px; border: 3px solid #333; border-radius: 20px;}

#idx_bottom { font-size: 0;}
#idx_bottom button { display: inline-block; width: 50%; height: 60px; color: #fff; font-weight: 500; line-height: 100%; cursor: pointer;}
#idx_bottom button b { font-weight: 600; }
#idx_bottom button img { margin-right: 7px; }
#idx_bottom button.homepage { background: #523be0; }
#idx_bottom button.leaflet { background: #883fe2; }


/* footer */
#footer_wrap {padding: 20px; font-size: 1.35rem; font-weight: 400; text-align: center; color: rgba(255,255,255,0.6); background: #1d1d21;}
#footer_wrap .info p { line-height: 120%; letter-spacing:0; }
#footer_wrap .info p span { margin-left:7px; }
#footer_wrap .info p a { margin-left: 2px; font-weight: 500; }
#footer_wrap .info p b { font-weight: 500; }

.courseTitle_wrap {
	padding: 30px;
	text-align: center;
}

.courseTitle_wrap .course {
	text-align: left;
}

.courseTitle_wrap .course a {
	display: block;
	height: 185px;
	margin-top: 30px;
	padding: 25px 25px 0 25px;
	box-sizing: border-box;
	border-radius: 30px;
	background-color: #eee;
	background-repeat: no-repeat;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.courseTitle_wrap .course a:first-child {
	margin-top: 0;
}

.courseTitle_wrap .course a.on span,
.courseTitle_wrap .course a.on b {
	color: #fff;
}

.courseTitle_wrap .course .c1 {
	background-image: url(/img/index/c1.png);
	background-size: 150px;
    background-position: calc(100% - 20px) 100%;
}

.courseTitle_wrap .course .c2 {
	background-image: url(/img/index/c2.png);
    background-size: 150px;
    background-position: calc(100% - 16px) 100%;
}

.courseTitle_wrap .course .c3 {
	background-image: url(/img/index/c3.png);
    background-size: 160px;
    background-position: calc(100% - 20px) 100%;
}

.courseTitle_wrap .course .c4 {
	background-image: url(/img/index/c4.png);
	background-size: 150px;
    background-position: calc(100% - 20px) 100%;
}

.courseTitle_wrap .course .c5 {
	background-image: url(/img/index/c5.png);
	background-size: 220px;
    background-position: 100% calc(100% - 20px);
}

.courseTitle_wrap .course .c6 {
	padding: 50px 30px 0 30px;
	background-color: #f8e39a;
	background-image: url(/img/index/c6.png);
	background-size: 130px;
    background-position: 100% 0;
	color: #6d664c;
}

.courseTitle_wrap .course .c1.on,
.courseTitle_wrap .course .c3.on,
.courseTitle_wrap .course .c5.on {
	background-color: #61baa6;
}

.courseTitle_wrap .course .c2.on,
.courseTitle_wrap .course .c4.on {
	background-color: #905cd1;
}

.courseTitle_wrap .course .c6.on {
	height: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}

.courseTitle_wrap .course .c6.on span {
	display: block;
	margin-bottom: 5px;
	font-size: 1.6rem;
	color: #7d7351;
}

.courseTitle_wrap .course .c6.on b {
	color: #6c664a;
}

.courseTitle_wrap .course .c6.on b i {
   
	font-style: normal;
	color: #e67579;
}

.courseTitle_wrap .course .c6.on p {
	margin-top: 30px;
	line-height: 150%;
	font-size: 1.4rem;
	word-break: keep-all;
}

.courseTitle_wrap .course .c7 {
	position: relative;
	background: #b28fdf url("/img/contents/c7_bg.png") no-repeat 50% 100% /100%;
}

.courseTitle_wrap .course .c7 img {
	position: absolute;
	right: 0;
	bottom: 20px;
	width: 160px;
}

.courseTitle_wrap .course .c7 span {
	color: #3c1371;
}

.courseTitle_wrap .course .c7 b {
	color: #fff;
}

.courseTitle_wrap .course span {
	font-size: 1.6rem;
	color: #797979;
}

.courseTitle_wrap .course b {
	display: block;
	margin-top: 5px;
   
	font-size: 3.2rem;
	color: #61baa6;
}

.courseTitle_wrap .course a:nth-child(even) b {
	color: #905cd1;
}

.courseTitle_wrap .all {
	display: inline-block;
	margin: 30px 0;
	font-size: 1.6rem;
	font-weight: 500;
	color: #666;
}


/* 팝업 */
.voucher-popup-wrap,
.time-popup-wrap {
	position: fixed;
	top: 0;
	left: 0;
	display: table;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99999;
}

.voucher-popup-wrap .view,
.time-popup-wrap .view {
	display: table-cell;
	vertical-align: middle;
}

.voucher-popup-wrap .box,
.time-popup-wrap .box {
	position: relative;
	width: 260px;
	height: 260px;
	margin: 0 auto;
	padding-top: 30px;
	box-sizing: border-box;
	border-radius: 40px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.time-popup-wrap .box {
	height: 196px;
}

.voucher-popup-wrap .box::before {
	content: "";
	position: absolute;
	top: -30px;
	left: -20px;
	width: 300px;
	height: 200px;
	background: url("/img/index/popup-illust1.png") no-repeat 0 0 /100%;
	z-index: -1;
}

.voucher-popup-wrap .box strong {
	font-size: 2.4rem;
	font-weight: 600;
	color: #5b67ff;
}

.voucher-popup-wrap .box span {
	display: block;
	width: 70%;
	margin: 10px auto;
	padding: 5px 0;
	border-radius: 100px;
	background: #5b67ff;
	font-size: 2rem;
	font-weight: 600;
	color: #fff;
}

.voucher-popup-wrap .box p {
	font-size: 1.4rem;
	color: #333;
}

.time-popup-wrap .box p {
	font-size: 1.6rem;
	color: #333;
}

.time-popup-wrap .box p span {
	font-weight: 600;
	color: #5b67ff;
}

.voucher-popup-wrap .box img,
.time-popup-wrap .box img {
	width: 74px;
	margin-top: 10px;
}


a.cbtn {display:inline-block; height:30px; padding:0 14px 0; border:1px solid #1d1d21; background-color:#1d1d21; font-size: 1.4rem; font-family: 'Ria'; font-weight: bold;color:#a1fe71; line-height:25px;}
a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#a1fe71;}
a.cbtn1 {display:inline-block; height:30px; padding:0 14px 0; border:1px solid #1d1d21; background-color:#1d1d21; font-size: 1.4rem; font-family: 'Ria'; font-weight: bold; color:#a1fe71; line-height:25px;}
a.cbtn1:hover {border: 1px solid #000; background-color:#000; color:#a1fe71;}

.id_blur { font-family: '맑은 고딕', 'Malgun Gothic', "돋움", Dotum, AppleGothic, sans-serif; font-size: 12px; text-decoration: none; border:1px solid #CCCCCC; height: 18px; background: transparent url("/img/comm/login_bg.gif") 5px -6px; }
.id_focus { font-family: '맑은 고딕', 'Malgun Gothic', "돋움", Dotum, AppleGothic, sans-serif; font-size: 12px; text-decoration: none; border:1px solid #CCCCCC; height: 18px; background: #FFFFFF; }
.pw_blur { font-family: '맑은 고딕', 'Malgun Gothic', "돋움", Dotum, AppleGothic, sans-serif; font-size: 12px; text-decoration: none; border:1px solid #CCCCCC; height: 18px; background: transparent url("/img/comm/login_bg.gif") 5px 32px; }
.pw_focus { font-family: '맑은 고딕', 'Malgun Gothic', "돋움", Dotum, AppleGothic, sans-serif; font-size: 12px; text-decoration: none; border:1px solid #CCCCCC; height: 18px; background: #FFFFFF; }


/* login */
.loginlayer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:19008;}
.loginlayer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70);}
.loginlayer .pop-layer {display:block;}
.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width:280px; height:auto;  background-color:#fff; z-index: 10;}
.pop-layer .pop-container {padding: 0;}
.pop-layer p.ctxt { color:#666; line-height: 25px;}
.pop-layer .btn-r { width:100%; margin:10px 0 20px 0; text-align:right;}

/* page login  */
#loginWrap { position:relative; width:100%; z-index: 999;}
#loginWrap ul { display: table; margin: 0 auto 0;}
#loginWrap ul li { margin-bottom: 10px;}
#loginWrap ul li input{ width: 250px; padding: 10px 15px; font-size: 14px; border:3px solid #ddd; }
#loginWrap div > div {text-align: center;}
#loginWrap div > div a {width: 250px; height: auto; padding: 13px 15px 9px; font-size: 17px; font-weight: 400; letter-spacing: 0;}

/* */