@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);

@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)						{html{font-size:20px;}}


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

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

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: 640px; margin: 0 auto; }
.fix-layout .fix-pad	{
    padding: 0 1.5625%;
}
.fix-layout:after	{
    content: "";
    display: block;
    clear: both;
    width: 100%;
}
.fix-layout.no-padding	{ padding: 0; }

.clear:after	{
    content: "";
    display: block;
    position: relative;
    clear: both;
}

.single-img img	{ display: block; }
.single-img.txt-center img	{ margin: 0 auto; }



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

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

.mt10	{ margin-top: 0.5em !important; }
.mt20	{ margin-top: 1.0em  !important; }
.mt30	{ margin-top: 1.5em  !important; }
.mt40	{ margin-top: 2.0em  !important; }
.mt50	{ margin-top: 2.5em  !important; }
.mt60	{ margin-top: 3.0em  !important; }
.mt70	{ margin-top: 3.5em  !important; }
.mt80	{ margin-top: 4.0em  !important; }
.mt85	{ margin-top: 4.25em  !important; }
.mt90	{ margin-top: 4.5em  !important; }
.mt100	{ margin-top: 5em  !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: 0.5em  !important; }
.mb20	{ margin-bottom: 1.0em  !important; }
.mb30	{ margin-bottom: 1.5em  !important; }
.mb35	{ margin-bottom: 1.75em  !important; }
.mb40	{ margin-bottom: 2.0em  !important; }
.mb50	{ margin-bottom: 2.5em  !important; }
.mb60	{ margin-bottom: 3.0em  !important; }
.mb65	{ margin-bottom: 3.25em  !important; }
.mb70	{ margin-bottom: 3.5em  !important; }
.mb80	{ margin-bottom: 4.0em  !important; }
.mb90	{ margin-bottom: 4.5em  !important; }
.mb100	{ margin-bottom: 5em  !important; }

.pt10	{ padding-top: 0.5em !important; }
.pt20	{ padding-top: 1.0em  !important; }
.pt30	{ padding-top: 1.5em  !important; }
.pt40	{ padding-top: 2.0em  !important; }
.pt50	{ padding-top: 2.5em  !important; }
.pt60	{ padding-top: 3.0em  !important; }
.pt70	{ padding-top: 3.5em  !important; }
.pt80	{ padding-top: 4.0em  !important; }
.pt85	{ padding-top: 4.25em  !important; }
.pt90	{ padding-top: 4.5em  !important; }
.pt100	{ padding-top: 5em  !important; }

.pb10	{ padding-bottom: 0.5em  !important; }
.pb20	{ padding-bottom: 1.0em  !important; }
.pb30	{ padding-bottom: 1.5em  !important; }
.pb35	{ padding-bottom: 1.75em  !important; }
.pb40	{ padding-bottom: 2.0em  !important; }
.pb50	{ padding-bottom: 2.5em  !important; }
.pb60	{ padding-bottom: 3.0em  !important; }
.pb65	{ padding-bottom: 3.25em  !important; }
.pb70	{ padding-bottom: 3.5em  !important; }
.pb80	{ padding-bottom: 4.0em  !important; }
.pb90	{ padding-bottom: 4.5em  !important; }
.pb100	{ padding-bottom: 5em  !important; }


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

.ui-btn	{
    display: inline-block;
    min-width: 5em;
    height: 2.5em;
    line-height: 2.5em;
    box-sizing: border-box;
    color: #333;
    border: 1px solid #cacaca;
    background: #fafafa;
    text-align: center;
}
button.ui-btn	{ line-height: 1.75em; }

.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%;
}



.bo-top				{ border-top: 1px solid #000; }
.bo-top.bo-w1		{ border-top-width: 1px; }
.bo-top.bo-w2		{ border-top-width: 2px; }

.bo-bottom			{ border-bottom: 1px solid #000; }
.bo-bottom.bo-w1	{ border-bottom-width: 1px; }
.bo-bottom.bo-w2	{ border-bottom-width: 2px; }

.bo-gray			{ border-color: #e5e5e5 !important; }
.bo-gray-dark		{ border-color: #cfd1d4 !important; }
.bo-gray-dark2		{ border-color: #dedede !important; }

.bo-black			{ border-color: #000 !important; }
.bo-white			{ border-color: #fff !important; }


#header, #body	{ background: #fff; }