@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : Common.CSS 
	Company : The Webstyle co.,ltd 
 	Author : Woo Seok, Shin 2015-07
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc 
--------------------------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------
															* 공통 *
-------------------------------------------------------------------------------------------*/
/*btn_wrpa*/
.btn_wrpa {margin-top:20px}
.btn_wrpa:after {display:block; content:""; clear:both;}
.btn_wrpa  a {display:inline-block; padding:10px 40px; font-size:17px; color:#fff; background:#009f4c}
.btn_wrpa  a.type2 {background:#7e818b} 
/* Float */
.fl {float:left !important;}
.fr {float:right !important;}
.cb {clear:both !important;}

.clearfix {*zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}

/* Width */
.w215 {width:215px;}
.w300 {width:300px;}
.w500 {width:500px;} @media all and (max-width:500px) {.w500 {width:auto;}}
.w600 {width:600px;} @media all and (max-width:600px) {.w600 {width:auto;}}
.w700 {width:700px;} @media all and (max-width:768px) {.w700 {width:auto;}}
.w800 {width:800px;} @media all and (max-width:768px) {.w800 {width:auto;}}

.w10p {width:10% !important;}
.w20p {width:20% !important;}
.w30p {width:30% !important;}
.w40p {width:40% !important;}
.w50p {width:50% !important;}
.w60p {width:60% !important;}
.w70p {width:70% !important;}
.w80p {width:80% !important;}
.w90p {width:90% !important;}
.w95p {width:95% !important;}
.w100p {width:100% !important;}

/* Select, input, textarea Size */
.size60 {width:60px;}
.size125 {width:125px;}
.size190 {width:190px;}
.size215 {width:215px;}
.size255 {width:255px;}
.size320 {width:320px;}
.size385 {width:385px;}
.size450 {width:450px;}
.size515 {width:515px;}
.size580 {width:580px;}
.size645 {width:645px;}
.size100p {width:100%;}

/* scroll */
.scroll {overflow:auto;}
.scrollX {overflow-x:scroll;}
.scrollY {overflow-y:scroll;}

/* Margin */
.mar0    {margin:0px !important;}
.mar_t3  {margin-top:3px !important;}
.mar_t5  {margin-top:5px !important;}
.mar_t10 {margin-top:10px !important;}
.mar_t15 {margin-top:15px !important;}
.mar_t20 {margin-top:20px !important;}
.mar_t30 {margin-top:30px !important;}
.mar_t50 {margin-top:50px !important;}


.mar_r3  {margin-right:3px !important;}
.mar_r5  {margin-right:5px !important;}
.mar_r7  {margin-right:7px !important;}
.mar_r10 {margin-right:10px !important;}
.mar_r11 {margin-right:10px !important;}
.mar_r15 {margin-right:15px !important;}
.mar_r20 {margin-right:20px !important;}
.mar_r30 {margin-right:30px !important;}

.mar_b3  {margin-bottom:3px !important;}
.mar_b5  {margin-bottom:5px !important;}
.mar_b10 {margin-bottom:10px !important;}
.mar_b15 {margin-bottom:15px !important;}
.mar_b20 {margin-bottom:20px !important;}
.mar_b30 {margin-bottom:30px !important;}
.mar_b50 {margin-bottom:50px !important;}


.mar_l5  {margin-left:5px !important;}
.mar_l10 {margin-left:10px !important;}
.mar_l15 {margin-left:15px !important;}
.mar_l20 {margin-left:20px !important;}
.mar_l25 {margin-left:20px !important;}
.mar_l30 {margin-left:30px !important;}
.mar_auto {margin:auto !important;}

/* Padding */
.pd0  {padding:0px !important;}
.pd5  {padding:5px !important;}
.pd10 {padding:10px !important;}
.pd20 {padding:20px !important;}
.pd30 {padding:30px !important;}

.pd_t3  {padding-top:3px !important;}
.pd_t5  {padding-top:5px !important;}
.pd_t10 {padding-top:10px !important;}
.pd_t15 {padding-top:15px !important;}
.pd_t20 {padding-top:20px !important;}
.pd_t30 {padding-top:30px !important;}
.pd_t40 {padding-top:40px !important;}
.pd_t50 {padding-top:50px !important;}
.pd_t80 {padding-top:80px !important;}
.pd_t100 {padding-top:100px !important;}


.pd_r3  {padding-right:3px !important;}
.pd_r5  {padding-right:5px !important;}
.pd_r10 {padding-right:10px !important;}
.pd_r15 {padding-right:15px !important;}
.pd_r20 {padding-right:20px !important;}
.pd_r130 {padding-right:130px !important;}

.pd_b2  {padding-bottom: 2px !important;}
.pd_b5  {padding-bottom: 5px !important;}
.pd_b10 {padding-bottom:10px !important;}
.pd_b20 {padding-bottom:20px !important;}
.pd_b30 {padding-bottom:30px !important;}
.pd_b40 {padding-bottom:40px !important;}
.pd_b50 {padding-bottom:50px !important;}
.pd_b80 {padding-bottom:80px !important;}

.pd_l3  {padding-left:3px !important;}
.pd_l5  {padding-left:5px !important;}
.pd_l10 {padding-left:10px !important;}
.pd_l15 {padding-left:15px !important;}
.pd_l20 {padding-left:20px !important;}
.pd_l25 {padding-left:25px !important;}
.pd_l30 {padding-left:30px !important;}
.pd_l40 {padding-left:40px !important;}
.pd_l50 {padding-left:50px !important;}
.pd_l330 {padding-left:330px !important;}
.pd_l115 {padding-left:115px !important;}

/* Border Style */
.bor_tnone {border-top:0px;}
.bor_rnone {border-right:0px;}
.bor_bnone {border-bottom:0px;}
.bor_lnone {border-left:0px;}
.bor_none  {border:none;}

.bor_solid {border:1px solid #ddd;}
.bor_solid_top {border-top:1px solid #ddd;}
.bor_solid_right {border-right:1px solid #cccccc;}
.bor_solid_bottom {border-bottom:1px solid #ddd;}
.bor_solid_left {border-left:1px solid #ddd;}

.bor_dotted {border:1px dotted #ddd;}

/*----- Font Style -----*/
/*Font Uppercase*/
.upCase {text-transform:uppercase}

/* IME Mode */
.ime_en {ime-mode:inactive;}
.ime_ko {ime-mode:active;}

/* Text Align */
.l {text-align:left !important;}
.c {text-align:center !important;}
.r {text-align:right !important;}
.r5 {text-align:right !important; padding-right:5px !important;}
.r10 {text-align:right !important; padding-right:10px !important;}

.t {vertical-align:top !important;}
.m {vertical-align:middle !important;}
.b {vertical-align:bottom !important;}

/* Font Size */
.fs11 {font-size:11px !important;}
.fs12 {font-size:12px !important;}
.fs13 {font-size:13px !important;}
.fs14 {font-size:14px !important;}
.fs16 {font-size:16px !important;}
.fs22 {font-size:22px !important;}


/* Color */
.black {color:#000000;}
.white {color:#ffffff;}
.dGray {color:#333333;}
.gray {color:#666666;}
.blue {color:#006699}
.red {color:#D51F26}
.orange {color:#ff6600}
.green {color:#4b9b3f}


/* Line Height */
.lh11 {line-height:11px !important;}
.lh12 {line-height:12px !important;}
.lh13 {line-height:13px !important;}
.lh14 {line-height:14px !important;}
.lh16 {line-height:16px !important;}
.lh18 {line-height:18px !important;}
.lh20 {line-height:20px !important;}

/* Font Weight */
.fb {font-weight:bold !important;}
.fn {font-weight:normal !important;}


/* Text Align */
.l {text-align:left !important;}
.c {text-align:center !important;}
.r {text-align:right !important;}
.r5 {text-align:right !important; padding-right:5px !important;}
.r10 {text-align:right !important; padding-right:10px !important;}

.t {vertical-align:top !important;}
.m {vertical-align:middle !important;}
.b {vertical-align:bottom !important;}


/*letter-spacing*/
.le_15{letter-spacing:-1.5px}
.le_0{letter-spacing:0}
/* Font family */
.Arial {font-family:"Dotum", "Dotumche", "돋움", "돋움체", "Arial";}