@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 
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* Font Color */
.red {color:#ea002c; }
.blue {color:#1a87c7; }


/* Display */
.dis_inline {display:inline;}
.dis_inBlock {display:inline-block; *display:inline; *zoom:1;}
.dis_block {display:block;}
.dis_none {display:none !important;}

@media all and (max-width:1045px) {
	.tbl_dis_none {display:none !important;}
}
@media all and (max-width:768px) {
	.mob_dis_none {display:none !important;}
	.mob_dis_inline {display:inline !important;}
}

/* Visibility */
.visible_hide {visibility:hidden;}
.visible_show {visibility:visible;}

/* Float */
.fl {float:left !important;}
.fr {float:right !important;}
.cb {clear:both !important;}

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


/* Width */
.w90 {width:90px;}
.w95 {width:95px;}
.w100 {width:100px;}
.w105 {width:105px;}
.w110 {width:110px;}
.w120 {width:120px;}
.w150 {width:150px;}
.w293 {width:293px;}

.w10p {width:10% !important;}
.w20p {width:20% !important;}
.w30p {width:30% !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;}
.w95p {width:95% !important;}
.w100p {width:100% !important;}


/* Select, input, textarea Size */
.size40 {width:40px;}
.size50 {width:50px;}
.size60 {width:60px;}
.size70 {width:70px;}
.size80 {width:80px;}
.size90 {width:90px;}
.size100 {width:100px;}
.size110 {width:110px;}
.size115 {width:115px;}
.size160 {width:160px;}
.size200 {width:200px;}
.size220 {width:220px;}
.size280 {width:277px;}
.size315 {width:315px;}
.size480 {width:480px; width:479px\9;}
.size500 {width:500px;}
.size535 {width:535px;}
.size682 {width:682px;}
.size30p {width:30%;}
.size50p {width:50%;}
.size100p {width:100%;}

/* Overflow */
.overHidden {overflow:hidden;}
.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_t40 {margin-top:40px !important;}
.mar_t50 {margin-top:50px !important;}

.mar_r0  {margin-right:0px !important;}
.mar_r3  {margin-right:3px !important;}
.mar_r5  {margin-right:5px !important;}
.mar_r10 {margin-right:10px !important;}
.mar_r15 {margin-right:15px !important;}
.mar_r20 {margin-right:20px !important;}
.mar_r30 {margin-right:30px !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_b60 {margin-bottom:60px !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_l45 {margin-left:45px !important;}
.mar_l60 {margin-left:60px !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_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_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_l0  {padding-left:0px !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;}

/* 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 #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 -----*/
/*Font Uppercase*/
.upCase {text-transform:uppercase}

/* IME Mode */
.ime_en {ime-mode:inactive;}
.ime_ko {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;}

/* Color */
.black  {color:#000000;}
.white  {color:#ffffff;}
.red    {color:#f20018;}
.orange {color:#fe6309;}


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

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

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

/* Grid */
.row {position:relative; *zoom:1; width:100%; max-width:1200px; margin:0 auto;}
.row:after {content:""; clear:both; display:block;}

.col {
	float:left;
	min-height:1px; 
	margin-left:0.8333%; 
	margin-right:0.8333%;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s; 
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in; 
	transition-timing function: linear, ease-in;	
}

.col_fr {float:right;}
.col1 {width:6.66666%;}
.col2 {width:15%;}         @media all and (max-width:768px){.col2 {width:30%;}}  @media all and (max-width:639px){.col2 {width:98.3333%;}}
.col3 {width:23.33333%;}
.col4 {width:31.66666%;}
.col5 {width:40%;}
.col6 {width:48.33333%;}
.col7 {width:56.66666%;}
.col8 {width:65%;}
.col9 {width:73.33333%;}
.col10 {width:81.66666%;}  @media all and (max-width:768px){.col10 {width:66%;}}  @media all and (max-width:639px){.col10 {width:98.3333%;}}
.col11 {width:90%;}
.col12 {width:98.33333%; margin-left:0.8333%; margin-right:0.8333%;}

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

/* Grid Fix */
.fix {
	float:left; 
	min-height:1px;
	margin-left:10px; 
	margin-right:10px;
	-webkit-transition-property: width;
	-moz-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s; 
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in; 
	transition-timing function: linear, ease-in;	
}
.fix_fr {float:right;}
.fix1 {width:80px;}
.fix2 {width:180px;}
.fix3 {width:280px;}
.fix4 {width:380px;}
.fix5 {width:480px;}
.fix6 {width:580px;}
.fix7 {width:680px;}
.fix8 {width:780px;}
.fix9 {width:880px;}
.fix10 {width:980px;}
.fix11 {width:1080px;}
.fix12 {width:1180px;}

@media all and (max-width:400px){
	.fix4 {float:none; width:auto;}
}
@media all and (max-width:480px){
	.fix5 {float:none; width:auto;}
}
@media all and (max-width:560px){
	.fix6 {float:none; width:auto;}
}
@media all and (max-width:640px){
	.fix7 {float:none; width:auto;}
}
@media all and (max-width:720px){
	.fix8 {float:none; width:auto;}
}
@media all and (max-width:800px){
	.fix9 {float:none; width:auto;}
}
@media all and (max-width:880px){
	.fix10 {float:none; width:auto;}
}
@media all and (max-width:1024px){
	.fix11 {float:none; width:auto;}
}
@media all and (max-width:1280px){
	.fix12 {float:none; width:auto;}
}

.row .col.centered,
.row .fix.centered {float:none; margin:0 auto;}

/* Offset */
.row .offset1 {margin-left:8.33333%;}
.row .offset2 {margin-left:16.66666%;}
.row .offset3 {margin-left:25%;}
.row .offset4 {margin-left:33.33333%;}
.row .offset5 {margin-left:41.66666%;} 
.row .offset6 {margin-left:50%;}
.row .offset7 {margin-left:58.33333%;}
.row .offset8 {margin-left:66.66666%;} 
.row .offset9 {margin-left:75%;}
.row .offset10 {margin-left:83.33333%;}

/* Gutter */
.gutter0 {margin-left:0%; margin-right:0%;}
.gutter5 {margin-left:0.52083%; margin-right:0.52083%}
.gutter10 {margin-left:1.04166%; margin-right:1.04166%;}
.gutter15 {margin-left:1.5625%; margin-right:1.5625%;}
.gutter20 {margin-left:2.08333%; margin-right:2.08333%;}

.gutter_l0 {margin-left:0%;}
.gutter_l5 {margin-left:0.41665%;}
.gutter_l10 {margin-left:0.83333%;}
.gutter_l15 {margin-left:1.24995%;}
.gutter_l20 {margin-left:1.66666%;}
.gutter_l25 {margin-left:2.08325%;}
.gutter_l30 {margin-left:2.49999%;}
.gutter_l35 {margin-left:2.91655%;}
.gutter_l40 {margin-left:3.3332%;}

.gutter_r0 {margin-left:0%;}
.gutter_r5 {margin-left:0.41665%;}
.gutter_r10 {margin-left:0.8333%;}
.gutter_r15 {margin-left:1.24995%;}
.gutter_r20 {margin-left:1.66666%;}
.gutter_r25 {margin-left:2.08325%;}
.gutter_r30 {margin-left:2.49999%;}
.gutter_r35 {margin-left:2.91655%;}
.gutter_r40 {margin-left:3.3332%;}

.gutterFix0 {margin-left:0px; margin-right:0px;}
.gutterFix5 {margin-left:5px; margin-right:5px;}
.gutterFix10 {margin-left:10px; margin-right:10px;}
.gutterFix15 {margin-left:15px; margin-right:15px;}
.gutterFix20 {margin-left:20px; margin-right:20px;}

.gutterFix_l0 {margin-left:0px;}
.gutterFix_l5 {margin-left:5px;}
.gutterFix_l10 {margin-left:10px;}
.gutterFix_l15 {margin-left:15px;}
.gutterFix_l20 {margin-left:20px;}
.gutterFix_l25 {margin-left:25px;}
.gutterFix_l30 {margin-left:30px;}
.gutterFix_l35 {margin-left:35px;}
.gutterFix_l40 {margin-left:40px;}

.gutterFix_r0 {margin-right:0px;}
.gutterFix_r5 {margin-right:5px;}
.gutterFix_r10 {margin-right:10px;}
.gutterFix_r15 {margin-right:15px;}
.gutterFix_r20 {margin-right:20px;}
.gutterFix_r25 {margin-right:25px;}
.gutterFix_r30 {margin-right:30px;}
.gutterFix_r35 {margin-right:35px;}
.gutterFix_r40 {margin-right:40px;}

/* Push & Pull */
.push {position:relative; left:auto;}
.push1 {left:8.33333%;}
.push2 {left:16.66666%;}
.push3 {left:25%;}
.push4 {left:33.33333%;}
.push5 {left:41.66666%;}

.pushFix1 {left:80px;}
.pushFix2 {left:160px;}
.pushFix3 {left:240px;}
.pushFix4 {left:320px;}
.pushFix5 {left:400px;}

.pull {position:relative; right:auto;}
.pull1 {right:8.33333%;}
.pull2 {right:16.66666%;}
.pull3 {right:25%;}
.pull4 {right:33.33333%;}
.pull5 {right:41.66666%;}

.pullFix1 {right:80px;}
.pullFix2 {right:160px;}
.pullFix3 {right:240px;}
.pullFix4 {right:320px;}
.pullFix5 {right:400px;}

/* Prefix & Suffix */
.preffix1 {padding-left:80px;}
.preffix2 {padding-left:160px;}
.preffix3 {padding-left:240px;}
.preffix4 {padding-left:320px;}
.preffix5 {padding-left:400px;}

.suffix1 {padding-right:80px;}
.suffix2 {padding-right:160px;}
.suffix3 {padding-right:240px;}
.suffix4 {padding-right:320px;}
.suffix5 {padding-right:400px;}

.tiles {*zoom:1;}
.tiles:after {content:""; clear:both; display:block;}
.tiles > div,
.tiles > li {float:left; margin:0px; /*padding:1.04166%;*/ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.tiles > div.first,
.tiles > li.first {clear:both;}
.tiles > div > div,
.tiles > li > div {margin:10px;}

.two_up {overflow:hidden;}
.two_up > div, .two_up > li {float:left; width:50%; margin:0px; }
/*.two_up > div:nth-child(2n+1),
.two_up>li:nth-child(2n+1) {clear:both;}*/

.three_up {overflow:hidden;}
.three_up > div, .three_up > li {float:left; width:33.33333%;}
/*.three_up > div:nth-child(3n+1),
.three_up > li:nth-child(3n+1) {clear:both;}*/


.four_up {overflow:hidden;}
.four_up > div, .four_up > li {float:left; width:25%;}
/*.four_up > div:nth-child(4n+1),
.four_up > li:nth-child(4n+1) {clear:both;}*/

.five_up {overflow:hidden;}
.five_up > div, .five_up > li {float:left; width:20%;}
/*.five_up > div:nth-child(5n+1),
.five_up > li:nth-child(5n+1) {clear:both;}*/

.six_up {overflow:hidden;}
.six_up > div, .six_up > li {float:left; width:16.66666%;}
.six_up > div:nth-child(6n+1),
.six_up > li:nth-child(6n+1) {clear:both;}

.seven_up {overflow:hidden;}
.seven_up > div, .seven_up > li {float:left; width:14.28571%;}
/*.seven_up > div:nth-child(6n+1),
.seven_up > li:nth-child(6n+1) {clear:both;}*/

.eight_up {overflow:hidden;}
.eight_up > div, .eight_up > li {float:left; width:12.5%;}
/*.eight_up > div:nth-child(6n+1),
.eight_up > li:nth-child(6n+1) {clear:both;}*/

@media all and (max-width:768px) {
	.blocks > div.first, .blocks > li.first {clear:none;}
	.tiles > div.first, .tiles > li.first {clear:none;}
	
	

	.tbl_two_up > div, .tbl_two_up > li {width:50%;}
	.tbl_two_up > div:nth-child(2n+1),
	.tbl_two_up > li:nth-child(2n+1) {clear:both;}
		
}
@media all and (max-width:480px) {	
	.mob_one_up > div, .mob_one_up > li {width:100%;}
	
	.mob_two_up > div, .mob_two_up > li {width:50%;}
	.mob_two_up > div:nth-child(2n+1),
	.mob_two_up > li:nth-child(2n+1) {clear:both;}
		
	.mob_three_up > div, .mob_three_up > li {width:33.33333%;}
	.mob_three_up > div:nth-child(3n+1),
	.mob_three_up > li:nth-child(3n+1) {clear:both;}
		
	.mob_four_up > div, .mob_four_up > li {width:25%;}
	.mob_four_up > div:nth-child(4n+1),
	.mob_four_up > li:nth-child(4n+1) {clear:both;}	
}