@charset "utf-8";

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

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

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

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800&subset=korean');

@font-face {
 font-family: 'NanumSquare';
 font-weight: 400;
 src: url('./fonts/NanumSquareR.eot');
 src: url('./fonts/NanumSquareR.eot?#iefix') format('embedded-opentype'),
      url('./fonts/NanumSquareR.woff') format('woff'),
      url('./fonts/NanumSquareR.ttf') format('truetype');
}


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

*	{ box-sizing: border-box; }
body, input, select, textarea, button {font-family: 'Nanum Gothic','돋움',Dotum,'굴림',Gulim,AppleGothic,Sans-serif; font-size: 14px/1.4; color:#333}
body { min-width:  1200px; overflow-y: scroll; }

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}

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



/***************************
	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; }

.mt10	{ margin-top: 10px !important; }
.mt20	{ margin-top: 20px  !important; }
.mt30	{ margin-top: 30px  !important; }
.mt40	{ margin-top: 40px  !important; }
.mt50	{ margin-top: 50px  !important; }
.mt60	{ margin-top: 60px  !important; }
.mt70	{ margin-top: 70px  !important; }
.mt80	{ margin-top: 80px  !important; }
.mt85	{ margin-top: 85px  !important; }
.mt90	{ margin-top: 90px  !important; }
.mt100	{ margin-top: 100px  !important; }
.mt110	{ margin-top: 110px  !important; }
.mt120	{ margin-top: 120px  !important; }
.mt130	{ margin-top: 130px  !important; }
.mt140	{ margin-top: 140px  !important; }
.mt150	{ margin-top: 150px  !important; }
.mt160	{ margin-top: 160px  !important; }
.mt170	{ margin-top: 170px  !important; }
.mt180	{ margin-top: 180px  !important; }
.mt190	{ margin-top: 190px  !important; }
.mt200	{ margin-top: 200px  !important; }

.mb10	{ margin-bottom: 10px  !important; }
.mb20	{ margin-bottom: 20px  !important; }
.mb30	{ margin-bottom: 30px  !important; }
.mb35	{ margin-bottom: 35px  !important; }
.mb40	{ margin-bottom: 40px  !important; }
.mb50	{ margin-bottom: 50px  !important; }
.mb60	{ margin-bottom: 60px  !important; }
.mb65	{ margin-bottom: 65px  !important; }
.mb70	{ margin-bottom: 70px  !important; }
.mb80	{ margin-bottom: 80px  !important; }
.mb90	{ margin-bottom: 90px  !important; }
.mb100	{ margin-bottom: 100px  !important; }
.mb110	{ margin-bottom: 110px  !important; }
.mb120	{ margin-bottom: 120px  !important; }
.mb130	{ margin-bottom: 130px  !important; }
.mb140	{ margin-bottom: 140px  !important; }
.mb150	{ margin-bottom: 150px  !important; }
.mb160	{ margin-bottom: 160px  !important; }
.mb170	{ margin-bottom: 170px  !important; }
.mb180	{ margin-bottom: 180px  !important; }
.mb190	{ margin-bottom: 190px  !important; }
.mb200	{ margin-bottom: 200px  !important; }


.pt10	{ padding-top: 10px !important; }
.pt20	{ padding-top: 20px  !important; }
.pt30	{ padding-top: 30px  !important; }
.pt40	{ padding-top: 40px  !important; }
.pt50	{ padding-top: 50px  !important; }
.pt60	{ padding-top: 60px  !important; }
.pt70	{ padding-top: 70px  !important; }
.pt80	{ padding-top: 80px  !important; }
.pt85	{ padding-top: 85px  !important; }
.pt90	{ padding-top: 90px  !important; }
.pt100	{ padding-top: 100px  !important; }
.pt110	{ padding-top: 110px  !important; }
.pt115	{ padding-top: 115px  !important; }
.pt120	{ padding-top: 120px  !important; }
.pt130	{ padding-top: 130px  !important; }
.pt140	{ padding-top: 140px  !important; }
.pt150	{ padding-top: 150px  !important; }
.pt160	{ padding-top: 160px  !important; }
.pt170	{ padding-top: 170px  !important; }
.pt180	{ padding-top: 180px  !important; }
.pt190	{ padding-top: 190px  !important; }
.pt200	{ padding-top: 200px  !important; }

.pb10	{ padding-bottom: 10px  !important; }
.pb20	{ padding-bottom: 20px  !important; }
.pb30	{ padding-bottom: 30px  !important; }
.pb35	{ padding-bottom: 35px  !important; }
.pb40	{ padding-bottom: 40px  !important; }
.pb50	{ padding-bottom: 50px  !important; }
.pb60	{ padding-bottom: 60px  !important; }
.pb65	{ padding-bottom: 65px  !important; }
.pb70	{ padding-bottom: 70px  !important; }
.pb80	{ padding-bottom: 80px  !important; }
.pb90	{ padding-bottom: 90px  !important; }
.pb100	{ padding-bottom: 100px  !important; }
.pb110	{ padding-bottom: 110px  !important; }
.pb115	{ padding-bottom: 115px  !important; }
.pb120	{ padding-bottom: 120px  !important; }
.pb130	{ padding-bottom: 130px  !important; }
.pb140	{ padding-bottom: 140px  !important; }
.pb150	{ padding-bottom: 150px  !important; }
.pb160	{ padding-bottom: 160px  !important; }
.pb170	{ padding-bottom: 170px  !important; }
.pb180	{ padding-bottom: 180px  !important; }
.pb190	{ padding-bottom: 190px  !important; }
.pb200	{ padding-bottom: 200px  !important; }


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

.ui-btn	{
	display: inline-block;
	min-width: 100px;
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	color: #fff;
	padding: 0 20px;
	border: 1px solid #aaaaaa;
	background: #aaaaaa;
	text-align: center;
}
button.ui-btn	{ line-height: 35px; }

.ui-btn.point	{
	border-color: #faa635;
	background: #faa635;
	color: #fff;
}



.col-box .item	{
	display: block;
	position: relative;
	float: left;
	box-sizing: border-box;
}

.col-box .col-1	{
	width : 8.33%;
	width : -webkit-calc(100%/12*1);
	width :    -moz-calc(100%/12*1);
	width :         calc(100%/12*1);
}

.col-box .col-2	{
	width : 16.66%;
	width : -webkit-calc(100%/12*2);
	width :    -moz-calc(100%/12*2);
	width :         calc(100%/12*2);
}

.col-box .col-3	{
	width : 25.00%;
	width : -webkit-calc(100%/12*3);
	width :    -moz-calc(100%/12*3);
	width :         calc(100%/12*3);
}

.col-box .col-4	{
	width : 33.33%;
	width : -webkit-calc(100%/12*4);
	width :    -moz-calc(100%/12*4);
	width :         calc(100%/12*4);
}

.col-box .col-5	{
	width : 41.66%;
	width : -webkit-calc(100%/12*5);
	width :    -moz-calc(100%/12*5);
	width :         calc(100%/12*5);
}

.col-box .col-6	{
	width : 50.00%;
	width : -webkit-calc(100%/12*6);
	width :    -moz-calc(100%/12*6);
	width :         calc(100%/12*6);
}

.col-box .col-7	{
	width : 58.33%;
	width : -webkit-calc(100%/12*7);
	width :    -moz-calc(100%/12*7);
	width :         calc(100%/12*7);
}

.col-box .col-8	{
	width : 66.66%;
	width : -webkit-calc(100%/12*8);
	width :    -moz-calc(100%/12*8);
	width :         calc(100%/12*8);
}

.col-box .col-9	{
	width : 75.00%;
	width : -webkit-calc(100%/12*9);
	width :    -moz-calc(100%/12*9);
	width :         calc(100%/12*9);
}

.col-box .col-10	{
	width : 83.33%;
	width : -webkit-calc(100%/12*10);
	width :    -moz-calc(100%/12*10);
	width :         calc(100%/12*10);
}

.col-box .col-11	{
	width : 91.66%;
	width : -webkit-calc(100%/12*11);
	width :    -moz-calc(100%/12*11);
	width :         calc(100%/12*11);
}

.col-box .col-12	{
	width : 100%;
}

input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
select	{
	display: inline-block;
	position: relative;
	vertical-align: middle;
	box-sizing: border-box;
	border: 1px solid #dadada;
	color: #333;
	height: 30px;
	padding: 0 10px;
}
textarea	{
	border: 1px solid #dadada;
	color: #333;
	padding: 10px;
	min-height: 150px;
}


input[type="radio"],
input[type="checkbox"]	{ display: none; }

input[type="radio"] + label,
input[type="checkbox"] + label {
	display: inline-block;
	vertical-align: middle;
	margin-right: 1.5em;
	line-height: 1.5em;
	cursor: pointer;
}

input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
	content: "";
	display: inline-block;
	position: relative;
	vertical-align: middle;
	/*border: 4px solid #fff;
	background: #adadad;*/
	width: 19px;
	height: 19px;
	margin-right: 8px;
	box-sizing: border-box;
	-webkit-box-shadow: 0px 0px 1px 0px #666;
	-moz-box-shadow:    0px 0px 1px 0px #666;
	box-shadow:         0px 0px 1px 0px #666;
}
input[type="radio"] + label:before				{ border-radius: 9.0em; }
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before	{ background: #faa635; }