@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : common.css
	Company : The Webstyle co.,ltd
 	Author : Ho Sung, Lee 2018-08
 	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
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Display */
.display-ib {display:inline-block;}
.display-b {display:block;}
.display-n {display:none;}


/* Visibility */
.visible-hide {visibility:hidden;}
.visible-show {visibility:visible;}
.alpha0 {opacity:0;}
.blind {overflow:hidden; width:0; height:0; margin:0; padding:0; font-size:0; line-height:0; visibility:hidden;}

/* Float */
.fl {float:left !important;}
.fr {float:right !important;}
.cb {clear:both !important;}
.clearfix {*zoom:1;}
.clearfix:after {content:""; display:block; clear:both;}


/* Width */
.max-w1000 {max-width:1020px; margin:0 auto;}
.max-w870 {max-width:870px; margin:0 auto;}

.w100 {width:100px !important;}
.w125 {width:125px !important;}
.w130 {width:130px !important;}
.w140 {width:140px !important;}
.w150 {width:150px !important;}
.w180 {width:180px !important;}
.w200 {width:200px !important;}
.w250 {width:250px !important;}
.w280 {width:280px !important;}
.w300 {width:300px !important;}
.w350 {width:350px !important;}
.w378 {width:378px !important;}
.w385 {width:385px !important;}
.w401 {width:401px !important;}
.w425 {width:425px !important;}
.w500 {width:500px !important;}
.w600 {width:600px !important;}

.w10p {width:10% !important;}
.w20p {width:20% !important;}
.w30p {width:30% !important;}
.w32p {width:32% !important;}
.w40p {width:40% !important;}
.w45p {width:45% !important;}
.w50p {width:50% !important;}
.w55p {width:55% !important;}
.w60p {width:60% !important;}
.w70p {width:70% !important;}
.w80p {width:80% !important;}
.w90p {width:90% !important;}
.w92p {width:92% !important;}
.w100p {width:100% !important;}

/* Overflow */
.ovf-h {overflow:hidden;}
.ovf-xh {overflow-x:hidden;}
.ovf-yh {overflow-y:hidden;}
.scroll-x {overflow-x:auto;}
.scroll-y {overflow-y:auto;}

/* Mouse Cursor */
.pointer {cursor:pointer;}


/* 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-t25 {margin-top:25px !important;}
.mar-t30 {margin-top:30px !important;}
.mar-t40 {margin-top:40px !important;}
.mar-t50 {margin-top:50px !important;}

.mar-r0  {margin-right:0px !important;}
.mar-r2  {margin-right:2px !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-r15 {margin-right:15px !important;}
.mar-r17 {margin-right:17px !important;}
.mar-r20 {margin-right:20px !important;}
.mar-r30 {margin-right:30px !important;}
.mar-r65 {margin-right:65px !important;}

.mar-b0  {margin-bottom:0px !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-b40 {margin-bottom:40px !important;}
.mar-b50 {margin-bottom:50px !important;}
.mar_b60 {margin-bottom:60px !important;}

.mar-l3  {margin-left:3px !important;}
.mar-l5  {margin-left:5px !important;}
.mar-l6  {margin-left:6px !important;}
.mar-l7  {margin-left:7px !important;}
.mar-l10 {margin-left:10px !important;}
.mar-l12 {margin-left:12px !important;}
.mar-l15 {margin-left:15px !important;}
.mar-l17 {margin-left:15px !important;}
.mar-l20 {margin-left:17px !important;}
.mar-l25 {margin-left:20px !important;}
.mar-l30 {margin-left:30px !important;}
.mar-l45 {margin-left:45px !important;}
.mar-l60 {margin-left:60px !important;}
.mar-auto {margin:auto !important;}
.mar-y20 {margin-top:20px; margin-bottom:20px;}
.mar-y30 {margin-top:30px; margin-bottom:30px;}

/* Padding */
.pad-0  {padding:0px !important;}
.pad-5  {padding:5px !important;}
.pad-10 {padding:10px !important;}
.pad-20 {padding:20px !important;}
.pad-30 {padding:30px !important;}

.pad-t3  {padding-top:3px !important;}
.pad-t5  {padding-top:5px !important;}
.pad-t10 {padding-top:10px !important;}
.pad-t15 {padding-top:15px !important;}
.pad-t20 {padding-top:20px !important;}
.pad-t30 {padding-top:30px !important;}
.pad-t40 {padding-top:40px !important;}
.pad-t50 {padding-top:50px !important;}

.pad-r3  {padding-right:3px !important;}
.pad-r5  {padding-right:5px !important;}
.pad-r10 {padding-right:10px !important;}
.pad-r15 {padding-right:15px !important;}
.pad-r20 {padding-right:20px !important;}

.pad-b0  {padding-bottom: 0px !important;}
.pad-b2  {padding-bottom: 2px !important;}
.pad-b5  {padding-bottom: 5px !important;}
.pad-b10 {padding-bottom:10px !important;}
.pad-b20 {padding-bottom:20px !important;}
.pad-b30 {padding-bottom:30px !important;}
.pad-b40 {padding-bottom:40px !important;}
.pad-b50 {padding-bottom:50px !important;}

.pad-l0  {padding-left:0px !important;}
.pad-l3  {padding-left:3px !important;}
.pad-l5  {padding-left:5px !important;}
.pad-l10 {padding-left:10px !important;}
.pad-l15 {padding-left:15px !important;}
.pad-l20 {padding-left:20px !important;}
.pad-l25 {padding-left:25px !important;}
.pad-l30 {padding-left:30px !important;}
.pad-l40 {padding-left:40px !important;}
.pad-l50 {padding-left:50px !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 !important;}

.bor-solid {border:1px solid #d7d7d7 !important;}
.bor-solid-t {border-top:1px solid #d7d7d7 !important;}
.bor-solid-r {border-right:1px solid #d7d7d7 !important;}
.bor-solid-b {border-bottom:1px solid #d7d7d7 !important;}
.bor-solid-l {border-left:1px solid #d7d7d7 !important;}

.bor-dotted {border:1px dotted #ddd;}


/*-------- Font Style --------*/

/* IME Mode */
.ime-en {	
	-webkit-ime-mode:inactive;
	-moz-ime-mode:inactive;
	-ms-ime-mode:inactive;
	ime-mode:inactive;
}
.ime-ko {	
	-webkit-ime-mode:active;
	-moz-ime-mode:active;
	-ms-ime-mode:active;
	ime-mode:active;
}

/* 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;}
.fs20 {font-size:20px !important;}
.fs24 {font-size:24px !important;}
.fs25 {font-size:25px !important;}

/* 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;}
.lh24 {line-height:24px !important;}

/* Font Color */
.fc-orange  {color:#ff8400;}
.fc-dOrange {color:#ff7200;}
.fc-blue    {/*color:#294d84;*/ color:#06C;}
.fc-red     {color:#ed1c24;}
.fc-black   {color:#000000;}

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

/* Text Align */
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}
.ta-r {text-align:right !important;}

.ta-l5  {text-align:left !important; padding-left:5px !important;}
.ta-l10 {text-align:left !important; padding-left:10px !important;}
.ta-l15 {text-align:left !important; padding-left:15px !important;}
.ta-r5  {text-align:right !important; padding-right:5px !important;}
.ta-r10 {text-align:right !important; padding-right:10px !important;}
.ta-r15 {text-align:right !important; padding-right:15px !important;}

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

/*Font Uppercase*/
.upCase {text-transform:uppercase;}
.lowCase {text-transform:lowercase;}


/*-------- Grid Style --------*/

/* Grid */
.row {position:relative;}
.row:after {content:""; display:block; clear:both;}
.col {
	float:left;
	width:100%;
	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out 0s;
	-moz-transition:all 0.3s ease-out 0s;
	-o-transition:all 0.3s ease-out 0s;
}
.col.right {float:right;}
.col.col1  {width:8.33333333%;}
.col.col2  {width:16.66666667%;}
.col.col3  {width:25%;}
.col.col4  {width:33.33333333%;}
.col.col5  {width:41.66666667%;}
.col.col6  {width:50%;}
.col.col7  {width:58.33333333%;}
.col.col8  {width:66.66666667%;}
.col.col9  {width:75%;}
.col.col10 {width:83.33333333%;}
.col.col11 {width:91.66666667%;}
.col.col12 {width:100%;}

.row.cols2 > .col {width:50%;}
.row.cols3 > .col {width:33.3333%;}
.row.cols3 > .col:first-child {width:33.3334%;}
.row.cols4 > .col {width:25%;}
.row.cols5 > .col {width:20%;}
.row.cols6 > .col {width:16.6666%;}
.row.cols6 > .col:first-child {width:16.667%;}
.row.cols7 > .col {width:14.2857142%;}
.row.cols7 > .col:first-child {width:14.2857148%;}
.row.cols8 > .col {width:12.5%;}
.row.cols9 > .col {width:11.1111%;}
.row.cols9 > .col:first-child {width:11.1112%;}
.row.cols10 > .col {width:10%;}
.row.cols12 > .col {width:8.3333%;}
.row.cols12 > .col:first-child {width:8.3334%;}

.row.gutter6 {margin:-3px;}
.row.gutter8 {margin:-4px;}
.row.gutter10 {margin:-5px;}
.row.gutter12 {margin:-6px;}
.row.gutter16 {margin:-8px;}
.row.gutter20 {margin:-10px;}
.row.gutter24 {margin:-12px;}
.row.gutter28 {margin:-14px;}
.row.gutter30 {margin:-15px;}
.row.gutter32 {margin:-16px;}
.row.gutter36 {margin:-18px;}
.row.gutter40 {margin:-20px;}
.row.gutter50 {margin:-25px;}
.row.gutter60 {margin:-30px;}
.row.gutter70 {margin:-35px;}

.row.gutter6 > .col {padding:3px;}
.row.gutter8 > .col {padding:4px;}
.row.gutter10 > .col {padding:5px;}
.row.gutter12 > .col {padding:6px;}
.row.gutter16 > .col {padding:8px;}
.row.gutter20 > .col {padding:10px;}
.row.gutter24 > .col {padding:12px;}
.row.gutter28 > .col {padding:14px;}
.row.gutter30 > .col {padding:15px;}
.row.gutter32 > .col {padding:16px;}
.row.gutter36 > .col {padding:18px;}
.row.gutter40 > .col {padding:20px;}
.row.gutter50 > .col {padding:25px;}
.row.gutter60 > .col {padding:30px;}
.row.gutter70 > .col {padding:35px;}

/* Blocks & Tiles */
.blocks {*zoom:1;}
.blocks:after {content:""; clear:both; display:block;}
.blocks > div,
.blocks > li {float:left; margin:0px;}

.two-up > div,
.two-up > li {width:50%;}

.three-up > div,
.three-up > li {width:33.33333%;}

.four-up > div,
.four-up > li {width:25%;}

.five-up > div,
.five-up > li {width:20%;}

.six-up > div,
.six-up > li {width:16.66666%;}

.seven-up > div,
.seven-up > li {width:14.28571%;}

.eight-up > div,
.eight-up > li {width:12.5%;}

.isnew {background:url('/images/common/ico_new_sml.gif') no-repeat 0 0;}