/* CSS 일반설정 */
@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 모바일 전용이기 때문에 웹에서 숨겨야할 것들 */
.webHide{display:none !important;}


/* 검색용 단어 숨기기 */
.robotSearchWord{position:absolute; left:-10000px; opacity:0;}

/* Reset */
 * {outline:0 !important;}   
 /* 웹에서는 적용 안하고, 모바일에서만 사용!! 모바일에서 클릭시 외각에 선 생김 방지 */
 
/* 기본설정 */
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
html, body{width:100%;}
html{-webkit-touch-callout:none;  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{width:100%;  -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-word;}
body,input,select,textarea,button {border:none;font-size:12px; font-family:'Noto Sans KR', sans-serif;color:#222;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
img,fieldset, button{border:0;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
caption,legend{line-height:0;font-size:1px;overflow:hidden;}

hr{border:thin solid #ddd; margin:20px 0; border-top:none;}
a{text-decoration:none; color:#222;}

.bodyWrap{width:1200px; margin:70px auto 0;}

/* 인풋태그 설정 */
input[type=tel],input[type=time],input[type=text],input[type=password],input[type=search],input[type=email],input[type=file],input[type=url],
	input[type=number],input[type=select],input[type=date],select,option
	{width:300px; height:50px; padding:0 20px; border:1px solid #ddd; border-radius:3px; background-color:#ebf9fa; font-size:14px;}
	
input::-webkit-input-placeholder{color:#999999; font-size:14px;}

/* textarea 설정 */
textarea{width:100%; height:150px; padding:10px 20px; border:1px solid #ddd; border-radius:3px; background-color:#ebf9fa; font-size:14px;}
textarea::placeholder {color:#999999; font-size:14px;}


/* 공통 모달 창*/
.modalWrap{display: none;  position: fixed; z-index: 5000; padding-top:130px; left: 0; top: 0; width: 100%; height: 100%; 
  overflow: auto; background-color: rgba(0,0,0,0.7);}
.modalContent{background:rgba(0, 0, 0, 0); width:1200px; margin:10px auto; }
.modalClose {color: #fff; float: right; font-size: 32px; font-weight: bold;}
.modalClose:hover, .modalClose:focus {color: #000; text-decoration: none; cursor: pointer;}
/* 모달 탬플릿
	<div id="" class="modalWrap">
	   	<!-- modal 팝업 내용 들어가는 부분 -->
		<div class="modalContent">
	        <span class="modalClose">&times;</span>                                                               
	        <!-- 모달 본문 내용 시작 -->

		</div>
	</div> <!-- 모달 종료 --> */




/* 다양한 효과 */
.mouseHand{cursor:pointer;}
.animate03{transition: 0.3s ease all;}
.animate04{transition: 0.4s ease all;}
.animate05{transition: 0.5s ease all;}
.animate06{transition: 0.6s ease all;}
.animate07{transition: 0.7s ease all;}
.animate08{transition: 0.8s ease all;}
.animate10{transition: 1.0s ease all;}
.animate15{transition: 1.5s ease all;}
.boxShadow{box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);}
.letterCut{/* 게시판 글자 넘어가면 말줄임표... */width:100%; display:inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 프로파일 이미지  */
.profilePhoto30{display:inline-block; width:30px; height:30px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}
.profilePhoto40{display:inline-block; width:40px; height:40px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}
.profilePhoto50{display:inline-block; width:50px; height:50px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}
.profilePhoto60{display:inline-block; width:60px; height:60px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}
.profilePhoto70{display:inline-block; width:70px; height:70px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}
.profilePhoto80{display:inline-block; width:80px; height:80px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}
.profilePhoto90{display:inline-block; width:90px; height:90px; border-radius:50px; background:no-repeat;  background-size:cover; background-position: 50% 20%;}



/* 이미지 중앙 처리 & 얼굴처리*/
.imgCenter{display:inline-block; background:no-repeat;  background-size:cover; background-position: 50% 50%;}
.imgFace{display:inline-block; background:no-repeat;  background-size:cover; background-position: 50% 25%;}
.imgBottom{display:inline-block; background:no-repeat;  background-size:cover; background-position: 50% 70%;}

/* 공용 아이콘 */
.headerLogo{display:inline-block; width:100px; height:35px; color:transparent; background:url(/images/default/headlogo.png) no-repeat; background-size: 100px 35px;}
.footerLogoWhite{display:inline-block; width:100px; height:35px; color:transparent; background:url(/images/default/footerLogoWhite.png) no-repeat; background-size: 100px 35px;}

.instagram{display:inline-block; width:41px; height:41px; color:transparent; background:url(/images/default/instagram@3x.png) no-repeat; background-size: 41px 41px;}
.youtube{display:inline-block; width:41px; height:41px; color:transparent; background:url(/images/default/youtube@3x.png) no-repeat; background-size: 41px 41px;}
.kakao{display:inline-block; width:41px; height:41px; color:transparent; background:url(/images/default/kakao@3x.png) no-repeat; background-size: 41px 41px;}

.searchIcon{display:inline-block; width:20px; height:20px; background:url(/images/default/icons.png) no-repeat -334px -16px; background-size: 500px 500px;}

.heartIcon{display:inline-block; width:14px; height:14px; background:url(/images/default/icons.png) no-repeat -181px -11px; background-size: 500px 500px;}
.heartOn2{display:inline-block; width:25px; height:22px; background:url(/images/default/icons.png) no-repeat -181px -191px; background-size: 500px 500px;}
.heartOff2{display:inline-block; width:25px; height:22px; background:url(/images/default/icons.png) no-repeat -212px -191px ; background-size: 500px 500px;}
.heartOnW{display:inline-block; width:25px; height:22px; background:url(/images/default/icons.png) no-repeat -150px -191px; background-size: 500px 500px;}
.shareIcon{display:inline-block; width:21px; height:21px; background:url(/images/default/icons.png) no-repeat -257px -254px; background-size: 500px 500px;}

.hamburgerBtn{display:inline-block; width:22px; height:22px; background:url(/images/default/icons.png) no-repeat -256px -453px; cursor:pointer; background-size: 500px 500px;}

.deleteBin{display:inline-block; width:15px; height:15px; background:url(/images/default/icons.png)  no-repeat -271px -101px; background-size: 500px 500px;}
.colorCamera25{display:inline-block; width:26px; height:26px; background:url(/images/default/icons.png)  no-repeat -181px -124px; background-size: 500px 500px;}
.colorCamera30{display:inline-block; width:30px; height:31px; background:url(/images/default/icons.png)  no-repeat -179px -154px; background-size: 500px 500px;}
.colorCamera45{display:inline-block; width:45px; height:47px; background:url(/images/default/icons.png)  no-repeat -222px -136px; background-size: 500px 500px;}
.colorCamera72{display:inline-block; width:72px; height:76px; background:url(/images/default/icons.png)  no-repeat -355px -217px; background-size: 800px 800px;}



/* 버튼표준화 */
.btn4BH{display:inline-block; width:80px; height: 42px; border-radius: 3px; text-align:center;
	background-color:#e2e2e2;  line-height:42px; font-size:15px !important; color:#222 !important; font-weight:bold !important; cursor: pointer;}
.btn4BH:HOVER{background-color:#3EC1CD ; color:#fff !important;}

