@charset "utf-8"; 

/**********************************************************************
- Common Style
-----------------------------------------------------------------------
* Descript : 해당 사이트의 메인/서브 공통 스타일
             전체적으로 들어가는 기본 스타일 혹은 레이아웃을 정의한다.
-----------------------------------------------------------------------
* 최초작성일 : 2017.04.19
* 최초작성자 : 더웹 박현정

* 최후작성일 : 2017.04.19
* 최후작성자 : 더웹 박현정
--
* 웹폰트 정의 : 나눔고딕 - Google Font
* 폰트 색상
- 기본 : #333;
- 강조 : #000;

**********************************************************************/

/* 웹폰트 */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);	/* Nanum Myeongjo */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

/* Hanna */
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);


/***************************
	Default
****************************/

*	{ box-sizing: border-box; }
body, input, select, textarea, button {font-family:'nanumgothic','Noto Sans KR','돋움',Dotum,'굴림',Gulim,AppleGothic,Sans-serif; color:#333}
body { min-width:  320px; overflow-y: scroll; }

body			{
	min-width: 320px;
	opacity: 0;
	transition: opacity .3s ease;
	-webkit-transition: opacity .3s ease;
	-ms-transition: opacity .3s ease;
}
body.end-load	{ opacity: 1; }


input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder	{color:#d2d2d2}

input:-ms-input-placeholder,
input::-webkit-input-placeholder,
input::-moz-placeholder {color:#767676} 

img	{ max-width: 100%; border: none; }

@media (max-width:360px)						{html{font-size:10px;}}
@media (min-width:361px) and (max-width:399px)	{html{font-size:11.25px;}}
@media (min-width:400px) and (max-width:439px)	{html{font-size:12.5px;}}
@media (min-width:440px) and (max-width:479px)	{html{font-size:13.75px;}}
@media (min-width:480px) and (max-width:519px)	{html{font-size:15px;}}
@media (min-width:520px) and (max-width:559px)	{html{font-size:16.25px;}}
@media (min-width:560px) and (max-width:599px)	{html{font-size:17.5px;}}
@media (min-width:600px) and (max-width:639px)	{html{font-size:18.75px;}}
@media (min-width:640px) and (max-width: 999px)	{html{font-size:20px;}}
@media (min-width:1000px)						{html{font-size: 18px;}}

.fix-layout	{ position: relative; max-width: 1200px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; }
.fix-layout:after	{
	content: "";
	display: block;
	clear: both;
	width: 100%;
}
.fix-layout.no-padding	{ padding: 0; }

@media all and (max-width: 1000px) { 
	.fix-layout	{ max-width: 640px; padding: 0 1.0em; }
}


@media all and (min-width:1001px) {
	.only-pc	{  }
	.only-ta	{ display: none !important; }
	.only-mo	{ display: none !important; }

	.not-pc	{ display: none !important; }
	.not-ta	{  }
	.not-mo	{  }
}

@media all and (max-width:1000px) and (min-width: 641px) {
	.only-pc	{ display: none !important; }
	.only-ta	{  }
	.only-mo	{ display: none !important; }

	.not-pc	{  }
	.not-ta	{ display: none !important; }
	.not-mo	{  }
}

@media all and (max-width: 640px) {
	.only-pc	{ display: none !important; }
	.only-ta	{ display: none !important; }
	.only-mo	{  }

	.not-pc	{  }
	.not-ta	{  }
	.not-mo	{ display: none !important; }
}




/***************************
	Templete
****************************/

.txt-left	{ text-align: left !important; }
.txt-center	{ text-align: center !important; }

.single img				{ display: block; }
.single.txt-center img	{ margin: 0 auto; }
.txt-right				{ text-align: right !important; }


hr.line	{
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	height: 1px;
	background: #d7d7d7;
}