@charset "utf-8";

/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif-light,'Malgun Gothic','맑은 고딕',sans-serif;font-size:12px}
img,fieldset,input,select{border:0; vertical-align: middle;}
a{text-decoration:none; color:#000;}
a:hover,a:active,a:focus{text-decoration:none}
body{margin: 0px; padding: 0px; color:#000; }
li{list-style: none;}
img{border-style: none;}
caption{display: none;}
table{table-layout: fixed;}


/*앱스토어*/
.header{height: 100px; background-color: #66b821; text-align: center; line-height: 100px;}
.header .logo{width: 120px;}
.wrapApp h1{height:60px; background-color: #3b3c3c; text-align: center; line-height: 60px;}
.list{background-color: #fff; padding:30px 20px;}
.list li{position: relative; padding:20px 0px 20px 90px; border:solid 1px #c5c5c5; border-radius: 5px; margin-bottom:20px; box-shadow: 1px 2px 3px #cecece; }
.list li{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ededed+100 */
	background: #ffffff; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */

}
.list li .icon{position: absolute; left:20px; top:20px; width: 60px; height: 60px;}
.list li .icon2{position: absolute; left:20px; top:18px; width: 50px; height: 50px;}
.list li .icon3{position: absolute; right:10px; top:12px; }
.list li p{font-size: 16px; font-weight: bold; letter-spacing: -0.5px;}
.list li .txt{margin-top:5px; line-height: 150%; font-family: dotum; font-size: 12px; font-weight: bold; color:#8a8a8a; } 

/*아이폰 설치가이드*/
.list .guide{ background: #fff !important; height:50px; padding:0; line-height: 50px; text-align: center; font-size: 14px; font-weight: bold;}
.list .guide img{margin-right: 10px;}
.list .guide a{display: block;}

.wrap_guide{display: none; position: fixed; overflow-y: auto; z-index:2000; top:0;left:0;width:100%;height:100%;}
.popBox{padding:15px 10px; }
.popBox .popCon1{position: relative; height: 40px;line-height: 40px; text-indent: 10px; background-color: #8d8d8d; color:#fff; font-size: 16px; font-weight: bold; }
.popBox .popCon1 .close{position: absolute; right:10px; top:0px; width: 30px; height:40px; text-align:center; text-indent:0;}
.popBox .popCon1 .close img{width: 15px; height: 15px;}
.popBox .popCon1 .close a{display: block;}
.popBox .popCon2{padding:20px 15px; background-color: #fff; border:solid 2px #8d8d8d; box-shadow: 2px 2px 5px  #999;}
.guide li{margin-bottom:15px;}
.guide .step,.guide .step2{background-color: #66b821;  font-size: 12px; color:#fff; font-weight: bold; }
.guide .step{padding:3px 15px; border-radius: 20px;}
.guide .step2{display: inline-block; width: 20px; height:20px; line-height: 20px; text-align: center; border-radius: 10px; margin-bottom:5px;}
.guide .txt{margin-top:10px; margin-bottom: 10px; font-size: 14px;}
.guide .txt2{position: absolute; left:150px; top:10%;  font-size: 14px;}

.guide .img{position: relative; padding-bottom:15px;}
.guide .img .next,.guide .img .next2{position: absolute; height: 8px; width: 10px; background: url(../img_app/img_next.gif) no-repeat left top; background-size:  10px 8px;}
.guide .img .next{bottom:0px; left:50%; margin-left: -5px;}
.guide .img .next2{bottom:0px; left:65px; }
.guide hr{border:0; border-top:solid 1px #ddd; padding:0; margin-bottom:15px;}

@media screen and (min-width:500px){
	body{background-color: #eee;}
	.header{height: 140px; background-color: #66b821; text-align: center; line-height: 140px;}
	.header .logo{width: 153px;}
	.wrap{padding-top:50px;}
	.wrapApp{width: 430px; margin: 0px auto; border:solid 1px #ddd;}
	.list{min-height: 300px; padding:50px 40px; }
	.list li{position: relative; padding:20px 0px 20px 100px; border-bottom:solid 1px #eee; }
	.list li .icon{top:25px;}
	.list li p{font-size: 18px;}
	.list li .txt{ font-size: 13px; } 
    .popBox{position: absolute; left:50%; width: 440px; margin-left:-265px; padding:50px 50px; }
   }
}