@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

* {margin:0;padding:0;line-height:1.4em;outline:none;font-family:'Noto Sans KR','sans-serif','Dotum', 'Gulim';}
html, body{height:100%;}
body{color:#444444;-webkit-text-size-adjust:none;font-size:12px;word-break:keep-all;}
body *{-webkit-overflow-scrolling:touch;}
legend, caption, figcaption, hr {display:none;}
p,ul,ol,li,dl,dt,dd,form {list-style-image:none;list-style-position:outside;list-style-type:none;border:0px;}
img,fieldset, frameset, frameborder, frame {border:0;}
a, img, span, b, input, select, em, textarea, label, strong{vertical-align:middle;outline-style:none;}
table{width:100%;border-collapse:collapse;}
a{color:inherit;text-decoration:none;cursor:pointer;color:#444444;}
a:hover{text-decoration:none;}

@media all and (max-width:359px){
	.wrap{font-size:10px;}
}

/*******************************************************************************
	 layout
 ******************************************************************************/
.header{position:fixed;top:0;left:0;width:100%;height:47px;text-align:center;box-shadow:0 3px 3px rgba(0,0,0,0.2);background:#fff;z-index:50;}
.header h1{height:100%;}
.header h1 img{height:100%;}
.uvo .header h1 img{height:70%; margin-top: 8px;}
.genesis .header h1 img{height:30%; margin-top: 17px;}
.header .menu{display:none;position:absolute;top:0;right:0;height:100%;width:47px;}
.header .menu span{position:absolute;top:50%;left:50%;display:block;width:13px;height:22px;margin:-12px -8px;background:url('../images/arr_menuBlue2.png') no-repeat -12px 0;background-size:auto 100%;}
.uvo .header .menu span{background:url('../images/arr_menuRed2.png') no-repeat -12px 0;background-size:auto 100%;}
.genesis .header .menu span{background:url('../images/arr_menuGen2.png') no-repeat -12px 0;background-size:auto 100%;}
.menuOn .header .menu span{background-position:1px 0;}

.menuArea{position:fixed;background:#fff;z-index:20}
.menuArea dt{position:relative;height:40px;}
.menuArea dt a{display:block;height:40px;}
.menuArea dt a strong{display:block;line-height:40px;font-size:1.5em;color:#000;padding-left:13px;}
.menuArea dd ul{padding:15px;}
.menuArea dd ul li{margin-top:10px;}
.menuArea dd ul li > strong{color:#596774;font-size:1.08em;vertical-align:top;}
.menuArea dd ul li > span{color:#000;font-size:1.08em;vertical-align:top;}
.menuArea dd ul li strong i img{width:12px;height:12px;position:relative;top:0.2em;vertical-align:top;}
.menuArea dd ul li strong span{vertical-align:top;}

@media (orientation: portrait) { 
.header .menu{display:none}
.menuArea{bottom:0;left:0;width:100%;box-shadow:0 -3px 3px rgba(0,0,0,0.2);}
.menuArea dt .arr{position:absolute;top:50%;right:15px;width:21px;height:11px;margin-top:-6px;background:url('../images/arr_menuBlue.png') no-repeat 0 0;background-size:100% auto;}
.menuArea dd{display:none;height:105px;border-top:1px solid #ccc;}
.menuArea dd ul li:first-child{float:left;margin-right:52px;margin-top:0;}
.menuArea dd ul li:nth-child(2){margin-top:0;}
.menuArea .textInfo{
	font-weight:bold;
}

.uvo .menuArea dt .arr{background:url('../images/arr_menuRed.png') no-repeat 0 0;background-size:100% auto;}
.genesis .menuArea dt .arr{background:url('../images/arr_menuGen.png') no-repeat 0 0;background-size:100% auto;}

.menuOn .menuArea dt .arr{background-position:0 100%;}
.menuOn .menuArea dd{display:block;}
.menuOn .mapArea{bottom:146px}
}

@media (orientation:landscape) {
.header .menu{display:block}
.menuArea{right:-200px;top:47px;bottom:0;width:200px;box-sizing:border-box;padding:0 15px;box-shadow:-3px 0 3px rgba(0,0,0,0.2);}
.menuArea dt{height:48px;line-height:48px;}
.menuArea dt a{padding-top:5px;border-bottom:1px solid #ccc}
.menuArea dt a strong{font-size:15px;}
.menuArea dd ul{padding:0 0;}
.menuArea dd ul li strong{display:block;}
.menuArea .textInfo{
	font-weight:bold;
}

.menuOn .menuArea{right:0;overflow-y:auto;}

.mapArea{bottom:0 !important;}
.menuOn .mapArea{right:200px;}
}

/* ending */
.ending{position:absolute;top:50%;left:0;width:100%;text-align:center;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.ending img{width:100%;max-width:640px}
@media (orientation:landscape) {
.ending img{width:50%;}
}

/* layerPop */
.layerPop{position:absolute;top:0;left:0;width:100%;height:100%;z-index:200}
.layerPop .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);}
.layerPop .layerConts{position:absolute;top:50%;left:50%;width:80%;max-width:380px;border-radius:5px;overflow:hidden;box-sizing:border-box;transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);border-radius:0.4em;background:#fff;}
.layerPop .close{display:block;position:absolute;top:0;right:0;width:0;height:46px;width:46px;text-indent:-9999px;overflow:hidden;}
.layerPop .close span{display:block;position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-7px 0 0 -7px;background:url('../images/btn_close.png') no-repeat 50% 50%;background-size:100% 100%}
.layerPop .close:hover{background:#eaeaea;}
.layerPop .layerHeader .tit{height:46px;line-height:48px;padding:0 15px;border-radius:0 5px 5px 0;font-size:1.33em;font-weight:bold;color:#111111;border-bottom:1px solid #eaeaea;background:#f3f3f3;text-align:center;}
.layerPop .layerBody{padding:15px 15px;}
.layerPop .layerBody .layerTxt1{font-size:1.16em;color:#555555;text-align:center;}
.layerPop .layerBody .layerTxt1 > p{height:60px;vertical-align:middle;}
.layerPop .layerFoot .btnBox{display:table;width:100%;border-top:1px solid #e1e1e1;}
.layerPop .layerFoot .btnBox .btn{display:table-cell;height:44px;line-height:44px;font-size:1.33em;color:#00529b;text-align:center;font-weight:bold;}
.layerPop .layerFoot .btnBox .btn:hover{color:#fff;background:#1baae2;}
.layerPop .layerFoot .btnBox .btn:nth-child(2){width:50%;}

.uvo .layerPop .layerFoot .btnBox .btn{color:#bc162c;}
.uvo .layerPop .layerFoot .btnBox .btn:hover{color:#fff;background:#bc162c;}

.genesis .layerPop .layerFoot .btnBox .btn{color:#a36b4f;}
.genesis .layerPop .layerFoot .btnBox .btn:hover{color:#fff;background:#a36b4f;}

/*******************************************************************************
	map
 ******************************************************************************/
.mapArea{position:absolute;top:47px;left:0;right:0;bottom:40px;overflow:hidden}
.mapArea .bg{width:100%;height:100%;}

.mapArea .myPos{position:absolute;top:1.4em;left:15px;display:block;width:44px;height:44px;border-radius:44px;box-shadow:0 3px 3px rgba(0,0,0,0.2);background:#fff;}
.mapArea .myPos span{display:inline-block;width:24px;height:24px;position:absolute;top:51%;left:50%;margin:-12px 0 0 -12px;background:url('../images/ico_myPos.png') no-repeat 0 0;background-size:100% auto;}
.mapArea .myPos.on{background-color:#1baae2;}
.mapArea .myPos.on span{background-position:0 100%;}
.mapArea .carPos{position:absolute;top:5.5em;left:15px;display:block;width:44px;height:44px;border-radius:44px;box-shadow:0 3px 3px rgba(0,0,0,0.2);background:#fff;}
.mapArea .carPos span{display:inline-block;width:24px;height:24px;position:absolute;top:51%;left:50%;margin:-12px 0 0 -12px;background:url('../images/ico_carPos.png') no-repeat 0 0;background-size:100% auto;}
.mapArea .carPos.on{background-color:#1baae2;}
.mapArea .carPos.on span{background-position:0 100%;}
.mapArea .layerTxt{position:absolute;top:17px;left:80px;right:15px;min-height:1.4em;padding:12px 5px;line-height:22px;color:#00529b;text-align:center;font-weight:bold;font-size:1em;background:rgba(255,255,255, 0.9);border-radius:0.2em;z-index:20;box-shadow:0 3px 3px rgba(0,0,0,0.2);}
.mapArea .markPos .mark{background:url('../images/mapMark_blue.png') no-repeat 0 0;background-size:100% auto;}
.mapArea .zoom{position:absolute;bottom:20px;left:15px;width:40px;height:80px;border-radius:0.2em;background:#fff;}
.mapArea .zoom a{float:left;height:50%;width:100%;}
.mapArea .zoom a.zoomIn{background:url('../images/ico_zoomin.png') no-repeat 50% 50%;background-size:22px auto;border-bottom:1px solid #e1e1e1;}
.mapArea .zoom a.zoomOut{background:url('../images/ico_zoomout.png') no-repeat 50% 50%;background-size:22px auto;}
.mapArea .zoom a:active{background-color:#eaeaea}
.mapArea .mapStyle{position:absolute;top:1.5em;right:15px;height:40px;width:96px;border-radius:0.2em;box-shadow:0 3px 3px rgba(0,0,0,0.2);background:#fff;}
.mapArea .mapStyle a{float:left;width:50%;line-height:40px;text-align:center;border-radius:0.2em;font-size:14px;}
.mapArea .mapStyle a:last-child{box-sizing:border-box;border-radius:0 0.2em 0.2em 0;border-left:1px solid #bbbbbb;}
.mapArea .mapStyle a.on{color:#000;background:#fff;}
.mapArea .mapStyle a.off{color:#b9b8b8;background:#eaeaea;}
.mapArea .mapPos{position:absolute;top:0;left:0;z-index:20}
.mapArea .mapPos span{display:block;border-radius:16px;width:16px;height:16px;border:3px solid #fff;box-shadow:0 0 5px rgba(0,0,0,0.5);background:url('../images/bg_mapPos_red.png') no-repeat 50% 50%;background-size:100% 100%;}
.mapArea .markPos{position:absolute;z-index:20;text-align:center;
}
.mapArea .markPos .mark{display:inline-block;width:34px;height:48px;}
.mapArea .markPos .tooltip{position:relative;top:-10px;font-size:14px;color:#000;padding:5px 10px;font-weight:bold;box-shadow:0 3px 3px rgba(0,0,0,0.2);background:#fff;max-width:141px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.mapArea .markPos .markInfo{position:relative;top:-10px;box-shadow:0 3px 3px rgba(0,0,0,0.2);background:#fff;
}
.mapArea .markPos .markInfo:after{content:""; display: block;position:absolute;bottom:-8px;left:50%;margin-left:-5px;
    width :0px; height:0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff;
}
.mapArea .markPos .markInfo:before{content:""; display: block;position:absolute;bottom:-8px;left:50%;margin-left:-4px;
    width :0px; height:0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid rgba(0,0,0,0.1);
}

.uvo .mapArea .myPos.on{background:#bc0a0a;}
.uvo .mapArea .myPos.on span{background-position:0 100%}
.uvo .mapArea .myPos span{background:url('../images/ico_myPos2.png') no-repeat 0 0;background-size:100% auto;}
.uvo .mapArea .markPos .mark{background:url('../images/mapMark_red.png') no-repeat 0 0;background-size:100% auto;}
.uvo .mapArea .mapPos span{background:url('../images/bg_mapPos_blue.png') no-repeat 50% 50%;background-size:100% 100%;}
.uvo .mapArea .layerTxt{color:#bc162c;}

.genesis .mapArea .myPos.on{background:#a36b4f;}
.genesis .mapArea .myPos.on span{background-position:0 100%}
.genesis .mapArea .myPos span{background:url('../images/ico_myPos2.png') no-repeat 0 0;background-size:100% auto;}
.genesis .mapArea .markPos .mark{background:url('../images/mapMark_genesis.png') no-repeat 0 0;background-size:100% auto;}
.genesis .mapArea .mapPos span{background:url('../images/bg_mapPos_genesis.png') no-repeat 50% 50%;background-size:100% 100%;}
.genesis .mapArea .layerTxt{color:#a36b4f;}