<!--@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); -->
@import url('webfont.css'); 

/***************************** clearfix start ****************************/

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */

.clear {clear:both;}

.clearfix:after {content: ".";             /* the period is placed on the page as the last thing before the div closes */
	display: block;                           /* inline elements don't respond to the clear property */ 
    height: 0;                             /* ensure the period is not visible */
    clear: both;                           /* make the container clear the period */
    visibility: hidden;                    /* further ensures the period is not visible */
}
.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */

/*스크롤 항상고정
body{ overflow-Y:scroll; *overflow-Y:; } */

/* 기본 폰트 */
body {overflow-y:scroll;}
body, article {font-family:"Nanum Gothic", "Dotum", Sans-serif; font-size:16px;}
h1, h2, h3, h4, h5, h6 {font-family:"Nanum Gothic", Dotum, Sans-serif;}
p {font-family:"Nanum Gothic", 'Roboto', Dotum, Sans-serif; font-size:13px; color:#777;line-height:2em;  word-break : break-all;}

.Roboto {font-family: 'Roboto';}
.Montserrat {font-family: 'Montserrat', sans-serif;}

/* a-style */
a {font-family:"Nanum Gothic", "Dotum", Sans-serif;  color: #333; text-decoration:none; vertical-align:middle;}
a:hover, a:active {color: #e82e2e; text-decoration:none;}

/*float설정*/
.fl {float:left;}
.fr {float:right;}
.fn {float:none;}
 
article, aside, hgroup, header, footer, figure, figcaption, nav, section {display: block;}

div, ul, li, ol, dl, dd, dt {font-family:"Nanum Gothic", Dotum, Sans-serif; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0; margin:0; vertical-align:middle; list-style:none;}
 
i {vertical-align:middle;}

/* ------------------------------------------------
    기본 스타일 설정
   ---------------------------------------------- */

.pa0 {padding:0;}
.pa5 {padding:5px;}
.pa10 {padding:10px;}
.pa15 {padding:15px;}
.pa20 {padding:20px;}
.pa30 {padding:30px;}
.pa40 {padding:40px;}
.pa50 {padding:50px;}

.ma0 {margin:0;}
.ma5 {margin:5px;}
.ma10 {margin:10px;}
.ma15 {margin:15px;}
.ma20 {margin:20px;}
.ma30 {margin:30px;}
.ma40 {margin:40px;}
.ma50 {margin:50px;}

/* 마진 top */
.mt0 {margin-top:0;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}

/* 마진 right */
.mr0 {margin-right:0;}
.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}

/* 마진 bottom */
.mb0 {margin-bottom:0;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}

/* 마진 left */
.ml0 {margin-left:0;}
.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}

/* 패딩 top */
.pt0 {padding-top:0;}
.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:15px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}
.pt50 {padding-top:50px;}

/* 패딩 right */
.pr0 {margin-right:0;}
.pr5 {margin-right:5px;}
.pr10 {margin-right:10px;}
.pr15 {margin-right:15px;}
.pr20 {margin-right:20px;}
.pr30 {margin-right:30px;}
.pr40 {margin-right:40px;}
.pr50 {margin-right:50px;}

/* 패딩 bottom */
.pb0  {padding-bottom:0;}
.pb5  {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb15 {padding-bottom:15px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}
.pb50 {padding-bottom:50px;}

/* 패딩 left */
.pl0  {padding-left:0;}
.pl5  {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.pl50 {padding-left:50px;}

/* 투명 */
.opacity10 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)'; /* IE-8 */ filter:alpha(opacity=10); /* IE-7 */ opacity:.1; /* all-browser */}
.opacity20 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)'; filter:alpha(opacity=20); opacity:.2;}
.opacity30 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; filter:alpha(opacity=30); opacity:.3;}
.opacity40 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)'; filter:alpha(opacity=40); opacity:.4;}
.opacity50 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; filter:alpha(opacity=50); opacity:.5;}
.opacity60 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=60)'; filter:alpha(opacity=60); opacity:.6;}
.opacity70 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; filter:alpha(opacity=70); opacity:.7;}
.opacity80 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)'; filter:alpha(opacity=80); opacity:.8;}
.opacity90 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)'; filter:alpha(opacity=90); opacity:.9;}
.opacity100 {-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; filter:alpha(opacity=100); opacity:1;}

/* 라운드 (ie-8이하지원X) */
.round3  {-moz-border-radius: 3px;  -webkit-border-radius: 3px;  border-radius: 3px;  -khtml-border-radius: 3px;}
.round5  {-moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  -khtml-border-radius: 5px;}
.round8  {-moz-border-radius: 8px;  -webkit-border-radius: 8px;  border-radius: 8px;  -khtml-border-radius: 8px;}
.round10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -khtml-border-radius: 10px;}
.round12 {-moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; -khtml-border-radius: 12px;}
.round15 {-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -khtml-border-radius: 15px;}
.round20 {-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; -khtml-border-radius: 20px;}
.round   {-moz-border-radius: 50%;  -webkit-border-radius: 50%;  border-radius: 50%;  -khtml-border-radius: 50%;}


/*///////폰트관련설정/////////////////////////////////////*/

/* 제목 폰트 
h1 {font-size:30px;font-weight:bold;letter-spacing:-1.8px;}
h2 {font-size:24px;font-weight:bold;letter-spacing:-1.6px;}
h3 {font-size:18px;font-weight:bold;letter-spacing:-1.4px;}
h4 {font-size:16px;font-weight:bold;letter-spacing:-1.2px;}
h5 {font-size:14px;font-weight:bold;letter-spacing:-1px;}
h6 {font-size:12px;font-weight:bold;letter-spacing:-0.5px;}
*/

/* 폰트 두께 */
.normal {font-weight:normal;}
.bold {font-weight:bold;}
.bold500 {font-weight:500;}

/* 텍스트 자간*/
.ls02 {letter-spacing:-0.2px;}
.ls05 {letter-spacing:-0.5px;}
.ls08 {letter-spacing:-0.8px;}
.ls10 {letter-spacing:-1px;}
.ls12 {letter-spacing:-1.2px;}
.ls15 {letter-spacing:-1.5px;}
.ls18 {letter-spacing:-1.8px;}
.ls20 {letter-spacing:-2px;}


/* 폰트 크기, 자간 */
.fs10 {font-size:10px !important;}
.fs11 {font-size:11px !important;}
.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs15 {font-size:15px !important;}
.fs16 {font-size:16px !important;}
.fs18 {font-size:18px !important;}
.fs20 {font-size:20px !important;}
.fs22 {font-size:22px !important;}
.fs24 {font-size:24px !important;}
.fs26 {font-size:24px !important;}
.fs28 {font-size:24px !important;}
.fs30 {font-size:30px !important;}
.fs32 {font-size:32px !important;}
.fs36 {font-size:36px !important;}
.fs40 {font-size:40px !important;}
.fs48 {font-size:48px !important;}
.fs60 {font-size:60px !important;}

/* 흑백 기본 색상 */
.gray1 {color:#111 !important;}
.gray2 {color:#222 !important;}
.gray3 {color:#333 !important;}
.gray4 {color:#444 !important;}
.gray5 {color:#555 !important;}
.gray6 {color:#666 !important;}
.gray7 {color:#777 !important;}
.gray8 {color:#888 !important;}
.gray9 {color:#999 !important;}
.graya {color:#aaa !important;}
.grayb {color:#bbb !important;}
.grayc {color:#ccc !important;}
.grayd {color:#ddd !important;}
.graye {color:#eee !important;}
.black {color:#000 !important;}
.white {color:#fff !important;}

/* standard 텍스트컬러 */
.aqua    {color:#00FFFF !important;}
.blue    {color:#2276c4 !important;}
.fuchsia {color:#FF00FF !important;}
.green   {color:#008000 !important;}
.lime    {color:#00FF00 !important;}
.maroon  {color:#800000 !important;}
.navy    {color:#000080 !important;}
.olive   {color:#808000 !important;}
.orange  {color:#F58026 !important;}
.purple  {color:#800080 !important;}
.red     {color:#ff3300 !important;}
.teal    {color:#008080 !important;}
.lemon  {color:#FFFF00 !important;}
.yellow  {color:#eabf12 !important;}