@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : Common.CSS
	Company : The Webstyle co.,ltd
 	Author : Jong Hoon, Park 2015-12
 	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
--------------------------------------------------------------------------------------------------------------------------------------------*/
/*박종훈 임시CSS*/
.sProList li.txt {padding:38px 0 20px 0;}
.sProList li.txt .sProBox {padding:0 10px; border:0; border-right:2px solid #FF4E00; border-left:2px solid #FF4E00; border-radius:0; background:none; font-family:"NanumGothicBold"; font-size:20px; color:#ff4e00; text-align:center;}
.sProList li.txt .sProBox span {display:block;}


/*------------------------------------------------------------------------------------------
                                         * Font Style *
-------------------------------------------------------------------------------------------*/
/*----- Color -----*/
.blue {color:#0076ba;}
.blue2 {color:#153165}
.blue3 {color:#00a1e0}
.blue4 {color:#003b5c}
.orange {color:#ff6600}
.yellow {color:#ffff00}
.skyBlue {color:#00a1e0;}
.black  {color:#000000;}
.white  {color:#ffffff;}
.red    {color:#f20018;}
.orange {color:#fe6309;}
.brown  {color:#9c4b3b;}
.lightGray {color:#F5F5F5}
.gray {color:#CCC}


/*----- Font Size -----*/
.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;}
.fs21 {font-size:21px !important;}
.fs24 {font-size:24px;}

/*----- 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;}
.l10 {text-align:left !important; padding-left:10px !important;}

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

/*----- Line Height -----*/
.lh1 {line-height:1 !important;}
.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;}

/*------------------------------------------------------------------------------------------
                                         * background *
-------------------------------------------------------------------------------------------*/
.bg_gray {background:#444444}
.bg_lite_gray {background:#F5F5F5}

/*------------------------------------------------------------------------------------------
                                         * Table Style *
-------------------------------------------------------------------------------------------*/
/*----- Table Style -----*/
/* TH, TD */
.bor_tnone {border-top:0px !important;}
.bor_rnone {border-right:0px !important;}
.bor_bnone {border-bottom:0px !important;}
.bor_lnone {border-left:0px !important;}
.bor_none  {border:none !important;}

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


/*------------------------------------------------------------------------------------------
                                         * Display Style *
-------------------------------------------------------------------------------------------*/
.pr {position:relative !important}

/*----- Float -----*/
.ovh {overflow:hidden !important;}
.fl {float:left !important;}
.fr {float:right !important;}
.cb {clear:both !important; }
.cb0 {clear:both !important; font-size:0px !important; line-height:0px !important;}

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

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

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

/* blind */
.blind {overflow:hidden; position:absolute; top:-9999em; left:-9999em; width:0; height:0; line-height:0; font-size:0;}


/*------------------------------------------------------------------------------------------
                                         * Display Style *
-------------------------------------------------------------------------------------------*/
/*----- 비율 -----*/
.size10p {width:10%;}
.size20p {width:20%;}
.size30p {width:30%;}
.size25p {width:25%;}
.size40p {width:40%;}
.size50p {width:50%;}
.size60p {width:60%;}
.size62p {width:62%;}
.size70p {width:70%;}
.size80p {width:80%;}
.size90p {width:90% !important;}
.size100p {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;}
.size150 {width:150px;}
.size160 {width:160px;}
.size190 {width:190px;}
.size200 {width:200px;}
.size220 {width:220px;}
.size245 {width:245px;}
.size280 {width:277px;}
.size300 {width:300px;}
.size315 {width:315px;}
.size400 {width:400px;}
.size480 {width:480px; width:479px\9;}
.size500 {width:500px;}
.size535 {width:535px;}
.size595 {width:595px;}
.size682 {width:682px;}
.size30p {width:30%;}
.size50p {width:50%;}
.size100p {width:100%;}


/*------------------------------------------------------------------------------------------
                                         * Margin *
-------------------------------------------------------------------------------------------*/
.mar0    {margin:0px !important;}
.mar_t0  {margin-top:0px !important;}
.mar_t3  {margin-top:3px !important;}
.mar_t5  {margin-top:5px !important;}
.mar_t7  {margin-top:7px !important;}
.mar_t10 {margin-top:10px !important;}
/*.m_mar_t10 {margin-top:10px;}
	@media all and (max-width:786px) {
		.m_mar_t10 {margin-top:10px;}
	}*/
.mar_t12 {margin-top:12px !important;}
.mar_t15 {margin-top:15px !important;}
.mar_t18 {margin-top:18px !important;}
.mar_t20 {margin-top:20px !important;}
.mar_t23 {margin-top:23px !important;}
.mar_t25 {margin-top:25px !important;}
.mar_t30 {margin-top:30px !important;}
.mar_t35 {margin-top:35px !important;}
.mar_t40 {margin-top:40px !important;}
.mar_t50 {margin-top:50px !important;}

.mar_r_3  {margin-right:-3px !important;}
.mar_r_4  {margin-right:-4px !important;}
.mar_r0  {margin-right:0 !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:0 !important;}
.mar_b1  {margin-bottom:1px !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_b25 {margin-bottom:25px !important;}
.mar_b30 {margin-bottom:30px !important;}
.mar_b33 {margin-bottom:33px !important;}
.mar_b35 {margin-bottom:35px !important;}
.mar_b40 {margin-bottom:40px !important;}
.mar_b50 {margin-bottom:50px !important;}
.mar_b70 {margin-bottom:70px !important;}
.mar_b80 {margin-bottom:80px !important;}

.mar_l0  {margin-left:0 !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_l40 {margin-left:40px !important;}
.mar_auto {margin:auto !important;}


/*------------------------------------------------------------------------------------------
                                         * Padding *
-------------------------------------------------------------------------------------------*/
.pd0  {padding:0px !important;}
.pd1  {padding:1px !important;}
.pd5  {padding:5px !important;}
.pd10 {padding:10px !important;}
.pd15 {padding:15px !important;}
.pd20 {padding:20px !important;}

.pd_t0  {padding-top:0px !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_t18 {padding-top:18px !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_r0  {padding-right:0px !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_r30 {padding-right:30px !important;}
.pd_r40 {padding-right:40px !important;}
.pd_r45 {padding-right:45px !important;}
.pd_r50 {padding-right:50px !important;}

.pd_b0  {padding-bottom: 0px !important;}
.pd_b1  {padding-bottom: 1px !important;}
.pd_b2  {padding-bottom: 2px !important;}
.pd_b5  {padding-bottom: 5px !important;}
.pd_b10 {padding-bottom:10px !important;}
.pd_b15 {padding-bottom:15px !important;}
.pd_b17 {padding-bottom:17px !important;}
.pd_b20 {padding-bottom:20px !important;}
.pd_b30 {padding-bottom:30px !important;}
.pd_b37 {padding-bottom:37px !important;}
.pd_b40 {padding-bottom:40px !important;}
.pd_b50 {padding-bottom:50px !important;}

.pd_l0  {padding-left:0 !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_l45 {padding-left:45px !important;}
.pd_l50 {padding-left:50px !important;}


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

.col {
	float:left;
	min-height:1px;
	margin-left:0.9803921%;
	margin-right:0.9803921%;
	-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.372549%;}
.col2 {width:14.705882%;} /*@media all and (max-width:768px){.col2 {width:30%;}}  @media all and (max-width:639px){.col2 {width:98.3333%;}}*/
.col3 {width:23.039215%;}
.col4 {width:31.372549%;}
.col5 {width:39.705882%;}
.col6 {width:48.039215%;}	@media all and (max-width:640px){.col6 {width:98.039215%;}}
.col7 {width:56.372549%;}
.col8 {width:64.705882%;}	@media all and (max-width:640px){.col8 {width:98.039215%;}}
.col9 {width:73.039215%;}	@media all and (max-width:978px){.col9 {width:98.039215%;}}
.col10 {width:81.372549%;}  /*@media all and (max-width:768px){.col10 {width:66%;}}  @media all and (max-width:639px){.col10 {width:98.3333%;}}*/
.col11 {width:89.705882%;}
.col12 {width:98.039215%; margin-left:0.9803921%; margin-right:0.9803921%;}
.col13 {width:98.039215%; margin-left:0.9803921%; margin-right:0.9803921%;}


/*#Content .col12 {width:100%; margin-left:0; margin-right:0;}*/

/*제품정보*/
.section_body .special .sProList {margin:-10px 0 0 0;}

.section_body .special .col {margin-top:10px;}




@media all and (max-width:640px) {
	.row.special .col6 {width:100%;}
	.row.special {margin-top:0}
	.row.Print .col {margin-left:0; margin-right:0}
	.row.Print .col4 {width:100%}
	.row.Print .col8 {width:100%}

}

.row.idea {padding-right:85px;}
@media all and (max-width:768px) {
	.row.idea {padding-right:0;}

}

/* 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:228px;}
.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;}

.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_one_up > div, .tbl_one_up > li {display:inline-block; width:100%; text-align:center }


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

	.tbl_three_up > div, .tbl_three_up > li {width:33.33333%;}
	.tbl_three_up > div:nth-child(3n+1),
	.tbl_three_up > li:nth-child(3n+1) {clear:both;}
}
@media all and (max-width:510px) {
	.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;}
}