@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


@font-face {
	font-family:'icomoon';
	src:url('../icomoon/icomoon.eot?asxbi');
	src:url('../icomoon/icomoon.eot?asxbi#iefix') format('embedded-opentype'),
		url('../icomoon/icomoon.ttf?asxbi') format('truetype'),
		url('../icomoon/icomoon.woff?asxbi') format('woff'),
		url('../icomoon/icomoon.svg?asxbi#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}



.clearfix:before, .clearfix:after {display:table; content:"";}
.clearfix:after {clear:both;}

body {font-family:'Nanum Gothic'; font-weight:normal; background:rgba(0, 0, 0, 0.8);}

/* 버튼 */
.btnWrap {text-align:center; margin:0;}


.ui_btn {
	display:inline-block; width:100%; max-width:110px; margin:0 2px; 
	color:#333; text-align:center; background:#fff; border-radius:0; border:1px solid rgba(0, 0, 0, 0.3);
	padding:3px 0; font-size:13px; line-height:25px; font-family:'Nanum Gothic','sans-serif';
	filter:alpha(opacity=100); opacity:1;
}
.ui_btn:hover { color:#fff; background:#007da7;}




.arrow_left {position:relative;}
.arrow_left::after {
	content:""; display:block; width:8px; height:8px; 
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	position: absolute; top:50%; margin-top:-4px;
	border-bottom:1px solid #333; border-left:1px solid #333; left:10px; 
}
.arrow_right {position:relative;}
.arrow_right::after {
	content:""; display:block; width:6px; height:6px; 
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	position: absolute; top:50%; margin-top:-3px;
	border-top:1px solid #333; border-right:1px solid #333; right:10px; 
}
.ui_btn:hover.arrow_left::after { border-bottom:1px solid #fff; border-left:1px solid #fff;}
.ui_btn:hover.arrow_right::after { border-top:1px solid #fff; border-right:1px solid #fff;}
.ui_btn.arrow_left, .ui_btn.arrow_right {text-align:left; padding:3px 0 3px 10px;}

.btn_highlight {background:#444; color:#fff;}
.btn_gray {background:#f2f2f3;}

/* 배경색상 */
.bg_gray {background:#f2f2f3;}



/* Direction Nav */
.flex-nav {*height: 0; margin:0 auto; padding:0; list-style:none; 
	width:1200px; 
	position:fixed; top:50%; left:0; right:0; z-index:100; margin-top:-40px;
	
}
.flex-nav a  {
	text-decoration:none; display:block; width:80px; height:80px; 
	position: absolute; top:50%; z-index:999; overflow:hidden; opacity:1; cursor: pointer; color:rgba(255,255,255,0.8); *text-shadow:1px 1px 0 rgba(255,255,255,0.3); 
	padding:0;
    font-weight:300;
	

}
.flex-nav .flex-prev {left:0;}
.flex-nav .flex-next {right:0;  text-align:right;}
.flex-nav a:before  { font-family:'icomoon'; font-size:80px; line-height:80px; display:inline-block; content:'\e90b'; *color:#726f65; }
.flex-nav a.flex-next:before  {content:'\e916'; }
.flex-nav a:hover {opacity:1;}


.ml20 {margin-right:20px;}


/* 레이아웃 */
#viewport {
	position:relative; overflow:hidden; clear:both;  display:table; width:1000px; height:700px; background:#fff; border-radius:15px; 
	left:50%; top:50%; margin-left:-500px; margin-top:-350px;
}
#viewport .view {padding:30px 70px;}




#btn_close {
	overflow:hidden; position:fixed; background:rgba(0,0,0,0.5); border-radius:0 5px 5px 0; 
	left:50%; margin-left:500px; z-index:100;
	width:52px; height:50px; padding:0 0 0 2px; border:none; box-sizing:border-box; text-decoration:none; 

}
#btn_close:hover {background:rgba(0,0,0,0.9);}

#btn_close1:before  { font-family:'icomoon'; font-size:30px; line-height:30px; display:inline-block; content:'\e918'; color:#fff; }




#header {position:relative; overflow:hidden; clear:both; border-bottom:1px solid rgba(0, 0, 0, 0.3); padding:0 0 5px; margin:0 0 40px;}
#header .div_left {float:left;}
#header .div_right {float:right;}
#header .div_left p {margin:0; color:#7d7b76;}
#header .div_left h2 {margin:5px 0 0; font-weight:600;}
#header .div_left h2 strong {display:inline-block; float:left; font-weight:600; letter-spacing:0.05em; color:#58534b;}
#header .div_left h2 span {position:relative; font-weight:100; margin-left:12px; padding-left:12px; letter-spacing:-0.03em; color:#736f68;}
#header .div_left h2 span:before {content:""; display:table; width:3px; height:18px; position:absolute; top:50%; margin-top:-11px; left:0; background:#f2be39;}
#header .div_right {line-height:53px; display:table-cell; vertical-align:bottom;}
#header .div_right span {display:inline-block;  font-weight:400; color:#8b8478; margin:0 8px 0 0; font-size:19px; line-height:20px; vertical-align:bottom;}
#header .div_right strong {font-weight:600; letter-spacing:0.03em; color:#4a4849; font-size:27px; margin:0; line-height:28px; vertical-align:bottom;}



#content_wrap {position:relative; overflow:hidden; clear:both;  font-weight:normal;}
#content_wrap ul {margin:0; padding:0; list-style:none;}


/* step1 */
.step1-warp {margin:-8.5px;}
.step1-warp .box {float:left; position:relative; display:block; *width:23%; margin:8.5px; text-align:center;}
.step1-warp .box .img {*width:198px; height:220px; margin:0 auto; padding:10px;}
.step1-warp .box .img.mf {*background:#8fac94; width:130px;}
.step1-warp .box .img img {width:100%;}
.step1-warp .box .img.mc {*background:#ba884f; width:130px;}
.step1-warp .box .img.mx {*background:#8fac94; width:230px;}
.step1-warp .box .img.mo {*background:#8fac94; width:230px;}
.step1-warp .box .img.ma1000 {*background:#0380c3; width:130px;}
.step1-warp .box .img.ma400 {*background:#8ea1a5; width:130px;}
.step1-warp .box .img.screen {*background:#a5a5af; width:230px;}
.step1-warp .box p {position:absolute; bottom:10px; left:0; right:0; margin:0; padding:0;}
.step1-warp .box a {
	position:relative; display:block; border:1px solid rgba(0, 0, 0, 0.1); *padding:1px; color:#666; font-weight:600;
}
.step1-warp .box a:hover {border:1px solid rgba(0, 0, 0, 0.9); *padding:0; color:#000;}
.step1-warp .box a.on {border:1px solid rgba(0, 0, 0, 0.9); *padding:0; color:#000;}
.step1-warp .box a i {
	position:absolute; top:0; right:0; bottom:0; left:0;
	background:rgba(0,0,0,.5); opacity:0; width:100%; height:100%; display:table-cell; 
	*background:url('/uxiqx/images/img_over.png') 50% 50% no-repeat; *background-size:300px 300px;
}
.step1-warp .box a:hover i {opacity:1;}


/* step2 */
.step2-warp {position:relative; overflow:hidden; clear:both;}
.step2-warp .title_warp {position:relative; border-bottom:1px solid rgba(0, 0, 0, 0.1); padding:0 0 5px; margin:0; height:80px;}
.step2-warp .title_warp img {*position:absolute; left:15px; bottom:5px; float:left; margin-right:10px;}
.step2-warp .title_warp h2 {margin:0; padding:30px 0 0; *text-align:center; font-size:34px; font-weight:600; color:#000; *letter-spacing:0.03em; vertical-align:text-bottom;}
.step2-warp .title_warp h2 span {font-weight:100; margin-left:10px; font-size:18px; color:#777; letter-spacing:0; margin-bottom:10px;} 

.step2-warp .warp { *width:730px; margin:50px auto 0 auto; height: auto;}
.step2-warp .warp .box {position:relative; overflow:hidden; clear:both;}
/*
.step2-warp .warp .box:first-child {float:left;}
.step2-warp .warp .box:last-child {float:right;}
*/
.step2-warp .warp .box ul {text-align:center;}
.step2-warp .warp .box ul li {float:left; margin: 0 0; }
.step2-warp .warp .box ul li .img  {position:relative; display:block; margin:0 0 20px; height:195px; }
.step2-warp .warp .box ul li .img img {}
.step2-warp .warp .box ul li .btn  {display:block; margin:0; text-align:center;}

.step2-warp .warp .box ul li .btn a {
	width:70px; display:block; border:1px solid rgba(0, 0, 0, 0.2); background:#e2e3d7; padding:6px 0 4px; margin:0 auto 3px auto;
}
.step2-warp .warp .box ul li .btn a:hover {background:#edeee3;}
.step2-warp .warp .box ul li .btn a.on {border:1px solid rgba(0, 0, 0, 0.6); background:#444; color:#fff;}
.step2-warp .warp .box ul li .btn span {display:block; font-size:12px; letter-spacing:0.03em; font-weight:600; color:rgba(0, 0, 0, 1);}


.step2-warp .fixed {overflow-x:visible;  overflow-y:auto;}
.step2-warp .warp.f_MX { width:100%; min-width: 860px; max-width:860px; *height:360px}
.step2-warp .warp.f_MX .box {margin-top:35px;}
.step2-warp .warp.f_MX .box ul {width:100%;}
.step2-warp .warp.f_MX .box ul li {*width:16%; margin-right:25px;}
.step2-warp .warp.f_MX .box ul li:first-child {width:30px; margin-right:5px; margin-left:5px;}
.step2-warp .warp.f_MX .box ul li:last-child { margin-right:0;}
.step2-warp .warp.f_MX .box:first-child {margin-top:0;}
.step2-warp .warp.f_MX .box:last-child {*margin-top:40px;}

/* ML 2020-01-28 */
.step2-warp .warp.f_ML { width:100%; min-width:760px; max-width:760px; margin-top:40px;}
.step2-warp .warp.f_ML .box { *margin-top:35px; *margin-left:12%; }
.step2-warp .warp.f_ML .box ul { width:100%; }
.step2-warp .warp.f_ML .box ul li { width:25%; *padding-bottom: 3%; }
/* .step2-warp .warp.f_ML .box ul li:nth-child(odd) { padding-left: 15%;  } */
.step2-warp .warp.f_ML .box ul li div { *padding-left: 5px; }
.step2-warp .warp.f_ML .box ul li .img { height: auto; height: unset; }
.step2-warp .warp.f_ML .box ul li .btn {margin-left:35px;}

.step2-warp .warp.f_ML .box ul li.loop_0 , .step2-warp .warp.f_ML .box ul li.loop_1 { *margin-top: 27px; }
.step2-warp .warp.f_ML .box ul li.loop_2 , .step2-warp .warp.f_ML .box ul li.loop_3 { *margin-top: 5px; }
/* 
.step2-warp .warp.f_ML .box ul li.loop_0 .img , .step2-warp .warp.f_ML .box ul li.loop_1 .img { height: 105px;  }
.step2-warp .warp.f_ML .box ul li.loop_2 .img , .step2-warp .warp.f_ML .box ul li.loop_3 .img { height: 125px;  }*/



.step2-warp .warp.f_MX {}
.step2-warp .warp.f_MO .box { width:490px; margin:0 auto; }
.step2-warp .warp.f_MO .box ul {width:100%;}
.step2-warp .warp.f_MO .box ul li {*width:16%; margin-right:40px;}
.step2-warp .warp.f_MO .box ul li:first-child {width:30px; margin-right:10px; margin-left:5px;}
.step2-warp .warp.f_MO .box ul li:last-child { margin-right:0;}
.step2-warp .warp.f_MO .box:first-child {margin-top:60px;}
.step2-warp .warp.f_MO .box:last-child {margin-top:60px;}




/* step3 */
.step3-warp {position:relative; overflow:hidden; clear:both;}
.step3-warp .title_warp h2 {margin:0; font-size:27px; font-weight:600; color:#000; letter-spacing:0; line-height:30px;}
.step3-warp .title_warp h2 span {font-weight:300; color:#777; margin-left:7px; font-size:20px; }
.step3-warp .photo_wrap {float:left; width:400px; min-height:480px; overflow:hidden;}
.step3-warp .photo_wrap { border: none; }
.step3-warp .color_wrap {float:right; width:440px;}
.step3-warp .photo_wrap .color_select {*background:#ba884f;cursor: pointer;}
.step3-warp .photo_wrap .on { border-color: red !important; border: 1px solid; }/* 타일 선택중 이펙트 */
.step3-warp .color_wrap .box {margin:0 0 30px;}
.step3-warp .color_wrap .box:first-child {margin-top:20px;}
.step3-warp .color_wrap .box h2.title {position:relative; margin:10px 0; padding-left:20px; font-weight:600; color:#000; font-size:16px; letter-spacing:0.03em;}
.step3-warp .color_wrap .box h2.title:before {content:""; display:table; width:12px; height:12px; position:absolute; top:50%; margin-top:-7px; left:0; background:#2c3238;}
.step3-warp .color_wrap .color_select {background-size:100% 100%;}
.step3-warp .photo_wrap div p.number {
	position:absolute; color:#fff; left:0; top:0; width:18px; height:18px; line-height:18px; margin:0; 
	font-size:10px; font-weight:500; letter-spacing:0.05em; text-align:center; display:inline-block; 
	background:rgba(0, 0, 0, 0.5); border:1px solid rgba(0, 0, 0, 0.5);
}


.step3-warp .color_wrap .box .color_box {margin:-0.5%;}
.step3-warp .color_wrap .box .color_box .color {position:relative; width:22%; height:30px; margin:0.2% 0.5%; border:1px solid rgba(0, 0, 0, 0.3); padding:1px; display:inline-block;cursor: pointer; background-size:100% 100%;}
.step3-warp .color_wrap .box .color_box .color p {position:absolute; bottom:3px; left:5px; font-size:11px; margin:0; padding:0; color:rgba(255, 255, 255, 1); letter-spacing:0.03em;}
.step3-warp .color_wrap .box .color_box .color.on {border:2px solid rgba(0, 0, 0, 1); padding:0; background-size:100% 100%;}
.step3-warp .color_wrap .box .color_box .color.on i {
	position:absolute; top:0; right:0; bottom:0; left:0; 
	*background:rgba(0,0,0,0.3); opacity:1; width:100%; height:100%; display:table-cell; 
}
.step3-warp .color_wrap .box .color_box .color.on p {color:rgba(255, 255, 255, 1);}



/* step4 */
.step4-warp {position:relative; overflow:hidden; clear:both;}
.step4-warp .title_warp h2 {margin:0; font-size:27px; font-weight:600; color:#000; letter-spacing:0; line-height:30px;}
.step4-warp .title_warp h2 span {font-weight:300; color:#777; margin-left:7px; font-size:20px; }
.step4-warp .photo_wrap {position:relative; float:left; width:400px; min-height:480px; overflow:hidden}
.step4-warp .photo_wrap ul {margin:0; padding:0; list-style:none;}
.step4-warp .photo_wrap ul li {position:relative; padding:0; margin:0;}
.step4-warp .photo_wrap ul li img {display:block;}
.step4-warp .photo_wrap div {position:relative;}
.step4-warp .photo_wrap div p.number {
	position:absolute; color:#fff; left:0; top:0; width:18px; height:18px; line-height:18px; margin:0; 
	font-size:10px; font-weight:500; letter-spacing:0.05em; text-align:center; display:inline-block; 
	background:rgba(0, 0, 0, 0.4); border:1px solid rgba(0, 0, 0, 0.5);
}

.step4-warp .photo_wrap div p.numbering {
	position:absolute; color:#fff; left:50%; top:50%; width:56px; height:18px; line-height:20px; padding:0px; margin:0; margin-left:-28px; margin-top:-10px;
	font-size:10px; font-weight:500; letter-spacing:0.05em; text-align:center; display:inline-block; letter-spacing:-0.25px; 
	background:rgba(0, 0, 0, 0.5); border:1px solid rgba(0, 0, 0, 0.5);
}
.step4-warp .photo_wrap div p.numbering_b {
	position:absolute; color:#fff; left:50%; top:50%; width:56px; height:18px; line-height:20px; padding:0px; margin:0; margin-left:-28px; margin-top:-10px;
	font-size:10px; font-weight:500; letter-spacing:0.05em; text-align:center; display:inline-block; letter-spacing:-0.25px; 
	background:rgba(0, 0, 0, 0.5); border:1px solid rgba(0, 0, 0, 0.5);
}
.step4-warp .result_wrap {position:relative; float:right; width:440px; min-height:480px; margin:0;}
.step4-warp .result_wrap h2 {font-size:18px; font-weight:600; letter-spacing:0; margin:20px 0 15px;}
.step4-warp .result_wrap table {width: 100%; max-width:100%; margin:0 auto; border-top:1px solid #777; border-bottom:1px solid #777777; border-spacing:0; border-collapse:separate; } 
.step4-warp .result_wrap table tr {display:block; vertical-align:inherit; border-color:inherit; padding:0; border-bottom:1px solid #ccc; letter-spacing:0.03em;}
.step4-warp .result_wrap table tr th, .step4-warp .result_wrap table tr td {padding:13px 20px 10px; font-weight:500;  font-size:13px;}
.step4-warp .result_wrap table tr th {width:100px; border-right:1px solid #ccc; text-align:left; background:#f7f7f7; font-weight:600; } 
.step4-warp .result_wrap table tr td.strong {font-weight:600; color:#000;}

.step4-warp .result_wrap table tr:last-child {border-bottom:none;}

.step4-warp .result_wrap .form_mail {margin:30px 0 20px; position:relative; overflow:hidden; clear:both;}
.step4-warp .result_wrap .form_mail .left_con {width:226px; float:left;}
.step4-warp .result_wrap .form_mail input[type=text] {font-family:'Nanum Gothic','sans-serif';
	border:1px solid #666; width:210px; height:34px; line-height:32px; padding:0 7px; margin:0 0 5px; letter-spacing:-0.03em;font-size:13px;-webkit-border-radius: 0;-webkit-appearance:none
}
.step4-warp .result_btn {position:absolute; bottom:0; right:0px;}/* .result_wrap  */
.step4-warp .result_btn .btn {
	display:inline-block; *width:100%; *max-width:110px; margin:0; 
	color:#333; text-align:center; background:#fff; border-radius:0; border:1px solid rgba(0, 0, 0, 0.5);
	padding:5px 27px 5px 13px; font-size:13px; line-height:25px; font-family:'Nanum Gothic','sans-serif';
	color:#fff; background:#007da7; font-weight:600; 
}
.step4-warp .result_wrap .result_btn .btn:hover {background:#222;}
.step4-warp .result_wrap .result_btn .btn.arrow_right::after {border-top:1px solid #fff; border-right:1px solid #fff; right:13px;}
.step4-warp .result_wrap .result_btn button.btn {background:#444;}

.result_color_no { display: inline-block; margin-right: 5px; }



.product {position:relative; overflow:hidden; *clear:both; width:400px;}
.product.fl {float:left;}
.product ul {margin:0; padding:0; list-style:none;}
.product ul li {position:relative; padding:0; margin:0;}
.product ul li img {display:block;}
.product ul li p {
	position:absolute; color:#fff; left:50%; *right:0; bottom:50%; width:56px; line-height:14px; padding:3px 0 2px; margin:0; margin-left:-29px; margin-bottom:-10px; 
	font-size:8px; font-weight:600; letter-spacing:0.05em; text-align:center; display:inline-block; 
	background:rgba(0, 0, 0, 0.3); border:1px solid rgba(0, 0, 0, 0.2);
}


.color1_1 , .WIND {background:url('/images/color/color_WINDOW.jpg');}/* ACRYLIC_WINDOW */
.color2_1 , .C201 {background:url('/images/color/color_C201.jpg');}/* C201 */
.color2_2 , .C202 {background:url('/images/color/color_C202.jpg');}/* C202 */
.color2_3 , .C203 {background:url('/images/color/color_C203.jpg');}/* C203 */
.color2_4 , .C204 {background:url('/images/color/color_C204.jpg');}/* C204 */
.color2_5 , .C205 {background:url('/images/color/color_C205.jpg');}/* C205 */
.color2_6 , .C206 {background:url('/images/color/color_C206.jpg');}/* C206 */
.color2_7 , .C207 {background:url('/images/color/color_C207.jpg');}/* C207 */
.color2_8 , .C208 {background:url('/images/color/color_C208.jpg');}/* C208 */
.color2_9 , .C209 {background:url('/images/color/color_C209.jpg');}/* C209 */
.color2_10, .C210 {background:url('/images/color/color_C210.jpg');}/* C210 */
.color3_1 , .M116 {background:url('/images/color/color_M116.jpg');}/* M116 */
.color3_2 , .M311 {background:url('/images/color/color_M311.jpg');}/* M311 */
.color3_3 , .M136 {background:url('/images/color/color_M136.jpg');}/* M136 */
.color3_4 , .M128 {background:url('/images/color/color_M128.jpg');}/* M128 */
.color3_5 , .M146 {background:url('/images/color/color_M146.jpg');}/* M146 */
.color3_6 , .M319 {background:url('/images/color/color_M319.jpg');}/* M319 */
.color3_7 , .M308 {background:url('/images/color/color_M308.jpg');}/* M308 */

/* for ML */
.color_w , .w { background-color: white; }
.color_w p, .w p { color: black !important; }
.color_b , .b { background-color: black; }
.color_b p, .b p { color: white !important; }


.pro_MX {margin:30px;position:relative; overflow:hidden; clear:both; position:relative; border:1px solid rgba(0, 0, 0, 5); margin:0 auto !important; padding:2px !important;}
.pro_MX li {display:block;}
.pro_MX li div {float:left; position:relative; display:block; height:90px; border:1px solid rgba(0, 0, 0, 5); margin:2px;}

.pro_MX.w2360 {width:350px;}
.pro_MX.w2360 li div.w50 {width:169px;}
.pro_MX.w2360 li div.w25 {width:81.5px;}

.pro_MX.w1780 {width:270px;}
.pro_MX.pro_MX.w1780 li div.w30 {width:84px;}
.pro_MX.pro_MX.w1780 li div.w70 {width:174px;}

.pro_MX.w1200 {width:200px;}
.pro_MX.pro_MX.w1200 li div.w50 {width:94px;}
.pro_MX.pro_MX.w1200 li div.w100 {width:194px;}



.pro_MO1 {margin:30px;position:relative; overflow:hidden; *clear:both; border:1px solid rgba(0, 0, 0, 5); margin:0 auto !important; padding:2px !important;}
.pro_MO1 li {display:block;}
.pro_MO1 li div {float:left; position:relative; display:block; width:84px; border:1px solid rgba(0, 0, 0, 5); margin:2px;}

.pro_MO1 li div.h30 {height:84px;}
.pro_MO1 li div.h70 {height:174px;}

.pro_MO1.w2480 {width:360px;}

.pro_MO1.w1860 {width:270px;}
.pro_MO1.w1240 {width:180px;}


.pro_MO {position:relative; overflow:hidden; *clear:both; *border:1px solid rgba(0, 0, 0, 5); margin:0 auto !important; *padding:2px !important; text-align: center;}
.pro_MO li {display:block; float:left;  width:84px; border:1px solid rgba(0, 0, 0, 5); padding:2px;}
.pro_MO li div {position:relative; display:block; display:block; border:1px solid rgba(0, 0, 0, 5); margin:4px;}

.pro_MO li div.h30 {height:84px;}
.pro_MO li div.h70 {height:174px;}

/** util **/
.hidden_togle {display: none;}/*hide,show,toggle 기능용*/
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}/*화면낭독기*/
.sub_t { position: absolute; z-index: 1; }/*동작안함*/