@charset "utf-8";
@import url(//fonts.googleapis.com/css?family=Exo+2:300,400,500,600,700);
/* --------------------------------------------------------
Reset
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:''; content:none;}
table {border-collapse:separate; border-spacing:0;}

/* UI - Setup
------------------------------------------------*/
html, body {background:#e4e5ed; color:#666; font-size:13px !important; font-family:"Exo 2", sans-serif; line-height:20px;}
a {color:#464646; font-size:13px; text-decoration:none; line-height:22px;}
a:hover, a:focus {color:#333; text-decoration:none;}
h1, h2, h3, h4, h5 {margin:0;}
hr {margin:10px; border:1px dashed #ddd;}
button {margin:0; padding:0; border:none; outline:none; background:none; font-size:14px; cursor:pointer; appearance:none;}

.btn-wset {position:relative; z-index:1;}
.btn-wset a {display: block; background:#eee; border-radius:20px;}
.btn-wset a span {}
.progress-bar {background:#555;}
.div-progress.progress {background-color:#d0d0d0;}
.div-head {border-top-width:1px; padding:10px 0;}
.page-content ol > li > ol {padding-left:20px;}

/* ---- Scroll bar - webkit ----*/
::-webkit-scrollbar {height:6px; width:6px}
::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.2); background-clip:padding-box; border-radius:10px}

/* --------------------------------------------------------
SWITCH
----------------------------------------------------------*/
.switch {display:inline-block; position:relative; font-size:12px; cursor:pointer;}
.switch input {width:0; height:0; opacity:0;}
.switch .slider {display:inline-block; position:relative; width:30px; height:16px; border-radius:10px; background-color:#ccc; vertical-align:text-top; cursor:pointer; transition:.2s;-webkit-transition:.2s;}
.switch .slider:before {position:absolute; left:3px; bottom:3px; width:10px; height:10px; border-radius:50%; background-color:white; content:""; transition:.2s;-webkit-transition:.2s;}
.switch.active .slider {background-color:#4265ed;}
.switch.active .slider:before {transform:translateX(13px);-webkit-transform:translateX(13px); -ms-transform:translateX(13px);}

/* UI - COMMON
------------------------------------------------*/
.fb_x {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;-webkit-justify-content:center; -ms-flex-pack:center;}
.fb_y {display:flex; display:-webkit-flex; display:-ms-flexbox; align-items:center;-webkit-align-items:center; -ms-flex-align:center;}
.fb_xy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center;-webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.fb_e {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;-webkit-justify-content:flex-start; -ms-flex-pack:start;}
.fb_w {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-end;-webkit-justify-content:flex-end; -ms-flex-pack:end;}
.fb_ey {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;align-items:center;-webkit-justify-content:flex-start; -webkit-align-items:center; -ms-flex-pack:start; -ms-flex-align:center;}
.fb_wy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-end;align-items:center;-webkit-justify-content:flex-end; -webkit-align-items:center; -ms-flex-pack:end; -ms-flex-align:center;}
.fb_ew {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:space-between;-webkit-justify-content:space-between; -ms-flex-pack:justify;}
.fb_ewy {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:space-between;align-items:center;-webkit-justify-content:space-between; -webkit-align-items:center; -ms-flex-pack:justify; -ms-flex-align:center;}
.fb_dir_x {flex-direction:row;-ms-flex-direction:row;}
.fb_dir_y {flex-direction:column;-ms-flex-direction:column;}
.fi_start {align-self:flex-start;}
.fi_end {align-self:flex-end;}
.fi_xy {align-self:center;}
.filter_blur {filter:blur(6px); -webkit-filter:blur(6px);}

/* anime */
.search_ui, uiHeader, .uiSide,
.uiContainer .uiBody .uirSide,
#mNavidim {transition:all .16s cubic-bezier(.7,0,.3,1);transform:all .16s cubic-bezier(.7,0,.3,1);-webkit-transition:all .16s cubic-bezier(.7,0,.3,1);}

/* UI - LAYOUT
------------------------------------------------*/
.wrapper {width:100%;}
#mNavidim {position:fixed; z-index:9998; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.8); opacity:0; pointer-events:none;}
#mNavidim.active {opacity:1; pointer-events:auto;}

/* search */
.search_ui.active {top:0;}
.search_ui {position:fixed; z-index:9997; top:-60px; left:auto; right:0; min-width:288px; height:59px; padding:0 20px; background:#fff; -webkit-transform: translateZ(0);}
.search_ui form {width:100%; border-radius:6px; background:#e4e5ed;}
.search_ui form input[type="text"] {width:calc(100% - 40px); padding:6px; border:0; outline:none; background:none; color:#333; font-size:14px;}
.search_ui form button {margin:0; padding:6px; border:0; background:none; font-size:20px; color:#b0b3c4}
.search_ui .searchClose {padding-left:10px; font-size:26px;}

/* uiSide */
.uiSide {position:fixed; top:0; bottom:0; z-index:9999; width:240px; background:#333; box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.1); font-size:13px; -webkit-transform: translateZ(0);}
.uiSide h1 {height:60px; border-bottom:1px solid rgba(255,255,255,0.1);}
.uiSide h1 a {display:block; width:240px; height:60px; color:#c6a154; font-size:26px; font-weight:bold; line-height:60px;}
.uiSide .navi {height:calc(100% - 140px); overflow:auto;}
.uiSide .navi .menuBox {padding:20px;}
.uiSide .navi .menuBox ul {margin:0; padding:0; list-style:none; line-height:26px;}
.uiSide .navi .menuBox ul li {}
.uiSide .navi .menuBox ul li.first_depth a {margin-top:10px; padding-left:10px; border-radius:20px; color:rgba(255, 255, 255, 0.8); font-size:14px; font-weight:600;}
.uiSide .navi .menuBox ul li.first_depth.active a {background:rgba(0,0,0,0.2); color:rgba(255, 255, 255, 0.6);}
.uiSide .navi .menuBox ul li a {display:block; color:rgba(255, 255, 255, 0.6); font-size:1.1em; color:#FFF; padding:.5em 0; border-bottom:1px solid #2e3147; padding-left:.5em;}
.uiSide .navi .menuBox ul li a i {width:16px; color:#ed2c66; font-size:14px;}
.uiSide .navi .menuBox ul li ul {}
.uiSide .navi .menuBox ul li ul li {}
.uiSide .navi .menuBox ul li ul li.ca-line{margin-left:18px; font-weight:bold; border-bottom:1px dashed #ccc}
.uiSide .navi .menuBox ul li ul li a {padding-left:18px; line-height:26px;}
.uiSide .navi .menuBox ul li ul li a:before {width:16px; content:'\f189'; font-size:14px;}
.uiSide .navi .menuBox ul li ul li a:hover {color:#e8ff00;}
.uiSide .navi .menuBox ul li ul li.on a {color:#e8ff00; font-weight:600;}
.uiSide .uiFooter {font-size:12px; text-align:center; box-sizing:border-box;}
.uiSide .uiFooter a {display:block; height:40px; color:rgba(255,255,255,0.6); line-height:40px;}
.uiSide .uiFooter a:hover {background:rgba(0,0,0,0.1);}
.uiSide .uiFooter span {display:block; height:40px; border-top:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.6); line-height:40px;}

/* uiContainer */
.uiContainer {display:inline-block; position:relative; width:calc(100% - 240px); margin-left:240px; font-size:13px; vertical-align:top;}
.uiContainer .uiHeader {position:fixed; z-index:999; top:0; left:240px; right:0; height:60px; padding:0 40px; background:#FFF; box-shadow:0px 0px 4px 0px rgba(0, 0, 0, 0.1); -webkit-transform: translateZ(0);}
.uiContainer .uiHeader .title {opacity:0; pointer-events:none;}
.uiContainer .uiHeader .title button {padding-right:10px; font-size:28px; color:#999;}
.uiContainer .uiHeader .title h1 a {font-size:26px; font-weight:bold;}
.uiContainer .uiHeader .title h1 a img {max-width:240px; max-height:60px;}

.uiContainer .uiHeader .tools {}
.uiContainer .uiHeader .tools .user {position:relative; width:40px; height:40px; margin:0 10px; border-radius:50%; background:rgba(0,0,0,0.1); font-size:24px; text-align:center; cursor:pointer;}
.uiContainer .uiHeader .tools .user i {display:block; width:40px; height:40px; color:#999; font-size:24px; text-align:center; line-height:40px;}
.uiContainer .uiHeader .tools .user i:before {vertical-align:top;}
.uiContainer .uiHeader .tools .user img {width:40px; height:40px; border-radius:50%;}
.uiContainer .uiHeader .tools .user .label_green {position:absolute; top:0; left:-8px; height:20px; padding:0 6px; border:2px solid #fff; border-radius:10px; background:rgba(0,0,0,0.7); color:#fff; font-size:10px; font-weight:bold; text-align:center; line-height:16px; box-sizing:border-box;}
.uiContainer .uiHeader .tools .user .label_orange {position:absolute; top:0; right:-8px; height:20px; padding:0 6px; border:2px solid #fff; border-radius:10px; background:rgba(0,0,0,0.7); color:#fff; font-size:10px; font-weight:bold; text-align:center; line-height:16px; box-sizing:border-box;}
.uiContainer .uiHeader .tools button {width:40px; height:40px; margin:0 8px; border-radius:50%; color:#555; font-size:24px;}
.uiContainer .uiHeader .tools button:hover {color:#333;}
.uiContainer .uiHeader .tools button:active {background:rgba(0,0,0,0.06); color:#333;}

.uiContainer .uiBody {margin-top:60px; overflow: hidden;}
.uiContainer .uiBody .contents {display:inline-block; width:calc(100% - 370px); margin:40px; vertical-align:top;}
.uiContainer .uiBody .contents.sub {padding:20px; border-radius:8px; background:#FFF; box-shadow:0 1px 1px rgba(0, 0, 0, 0.06);}
.uiContainer .uiBody .contents.sub .title {padding: 4px 0 14px 0; margin-bottom:10px; border-bottom: 1px dashed #eee;}
.uiContainer .uiBody .contents.sub .title strong {color:#333; font-size:22px;}
.uiContainer .uiBody .contents.sub .title p {color:#999; font-size:14px;}
.uiContainer .uiBody .uirSide {display:inline-block; width:240px; margin:40px 0px 40px 0px; vertical-align:top; position:relative; z-index:9;}
.uiContainer .uiBody .uirSide .widget {margin-bottom:10px; padding:16px; border-radius:8px; background:rgba(255, 255, 255, 0.7); box-shadow:0 1px 1px rgba(0, 0, 0, 0.06); border:1px solid rgba(255, 255, 255, 0.8); box-sizing:border-box;}
.uiContainer .uiBody .uirSide .widget .wheader {margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #e4e3e3; color:#333; font-size:16px; font-weight:600;}
.uiContainer .uiBody .uirSide .widget .wBody {}

/* --------------------------------------------------------
board
----------------------------------------------------------*/
.view-head {border-right:1px solid #ddd !important; border-left:1px solid #ddd !important;}

/* --------------------------------------------------------
Go Top - Bottom
----------------------------------------------------------*/
.go-btn {display:none; position:fixed; z-index:2; right:24px; bottom:16%; width:20px;}
.go-btn button {display:block; width:20px; height:40px; margin:4px 0; border:2px solid #333; border-radius:10px; background:#ffffff; box-shadow:0px 2px 8px rgba(0, 0, 0, 0.2); color:#333; font-size:13px; text-align:center; line-height:36px !important;}
.go-btn .go-top {}
.go-btn .go-bottom {}

@media (max-width:1280px) {
.responsive .go-btn {left:20px; right:auto; bottom:40px; width:40px; }
.responsive .go-btn button {width:40px; height:40px; margin:0; border-radius:50%; box-shadow:0px 2px 20px rgba(0, 0, 0, 0.4); font-size:20px; line-height:28px !important;}
.responsive .go-btn .go-bottom {display:none;}
}

@media (max-width:768px) {
.go-btn {right:5px; bottom:0px;}
}

/* --------------------------------------------------------
RESPONSE
----------------------------------------------------------*/
@media (max-width:1280px) {
	#style-switcher, .widget-setup {display:none;}
	.search_ui {left:0;}
	.uiContainer .uiHeader .title {opacity:1; pointer-events:auto;}
	.uiContainer .uiHeader {left:0; padding:0 10px;}
	.uiSide {margin-left:-240px;}
	.uiSide.active {margin-left:0px;}
	.uiContainer {width:calc(100% - 0px); margin-left:0px;}
	.uiContainer .uiBody .contents {width:calc(100% - 20px); margin:10px; padding:0;}
	.uiContainer .uiBody .contents.sub {padding:20px 14px 10px 14px;}
	.uiContainer .uiBody .contents.sub .title p {}
	.responsive .uiContainer .uiBody .uirSide {display:none;}
}

/* --------------------------------------------------------
DEMO
----------------------------------------------------------*/
.themeSelect {}
.themeSelect ul { font-size:0;}
.themeSelect ul li {display:inline-block; width:43px; height:43px; background:#eee; margin:4px; border-radius:50%; text-align:center; font-size:12px; cursor:pointer; transition:all .16s cubic-bezier(.7,0,.3,1);transform:all .16s cubic-bezier(.7,0,.3,1);-webkit-transition:all .16s cubic-bezier(.7,0,.3,1); border:3px solid #fff; box-shadow:0px 1px 4px rgba(0, 0, 0, 0.3); text-indent:-999em;}
.themeSelect ul li:before { content:''; display:block; width:18px; height:18px; margin:10px; border-radius:50%; background:#333; border:2px solid #fff;}
.themeSelect ul li.theme:before {border-radius:0; transform:rotate(45deg);}
.themeSelect ul li.active {border:3px solid #000;}

.themeSelect ul li.Basic {background:linear-gradient(to right,#444c63 0, #444c63 50%,#ebebeb 51%, #ebebeb 100%);}
.themeSelect ul li.Basic:before {background: #00b0fc;}

.themeSelect ul li.white_top {background:linear-gradient(to bottom,#fff 0, #fff 50%,#eee 51%, #eee 100%);}
.themeSelect ul li.white_top:before {background:#17a9cb;}

.themeSelect ul li.white_right {background:linear-gradient(to right,#eee 0, #eee 50%,#ffffff 51%, #ffffff 100%);}
.themeSelect ul li.white_right:before {background:#df253b;}

.themeSelect ul li.white_left {background:linear-gradient(to right,#fff 0, #fff 50%,#eee 51%, #eee 100%);}
.themeSelect ul li.white_left:before {background:#4184f3;}

.themeSelect ul li.yellow_left {background:linear-gradient(to right,#ffb200 0, #ffb200 50%,#f4f4f4 51%, #f4f4f4 100%);}
.themeSelect ul li.yellow_left:before {background:#3c1e1e;}

.themeSelect ul li.dark_href_left {background:linear-gradient(to right,#333333 0, #333333 50%,#ebebeb 51%, #ebebeb 100%);}
.themeSelect ul li.dark_href_left:before {background:#7965de;}

.themeSelect ul li.red_top {background: linear-gradient(to bottom,#e0263c 0, #e0263c 50%,#f8f8f8 51%, #f8f8f8 100%);}
.themeSelect ul li.red_top:before {background: #e0263c;}

.themeSelect ul li.blue_left {background: linear-gradient(to right,#575fcf 0, #575fcf 50%,#fff 51%, #fff 100%);}
.themeSelect ul li.blue_left:before {background: #575fcf;}

.themeSelect ul li.theme_game {background:linear-gradient(to right,#333333 0, #333333 50%,#ebebeb 51%, #ebebeb 100%);}
.themeSelect ul li.theme_game:before {background:#ffca00;}

.themeSelect ul li.theme_mountain {background:linear-gradient(to right,#333333 0, #333333 50%,#ebebeb 51%, #ebebeb 100%);}
.themeSelect ul li.theme_mountain:before {background:#666;}

.themeSelect ul li.theme_pretty {background:linear-gradient(to bottom,#ff538c 0, #ff538c 50%,#f8f8f8 51%, #f8f8f8 100%);}
.themeSelect ul li.theme_pretty:before {background:#ff538c;}

.themeSelect ul li.theme_mint {background: linear-gradient(to bottom,#00bac9 0, #00bac9 50%,#f8f8f8 51%, #f8f8f8 100%);}
.themeSelect ul li.theme_mint:before {background: #00bac9;}


.section01{margin-top:3em;}
.section02{ padding:1em 0;}
.section02 .inner{text-align:center; padding:2em 0;}
.section02 i{display:inline-block; padding:.5em; background:#333; color:#FFF; font-size:3em; border-radius:100em;}
.section02 strong{display:block; font-size:1.2em; padding:.5em 0;}
.section02 span{word-break:keep-all;}
.section03 .title, .section04 .title{text-align:center;}
.section03 .title .inner, .section04 .title .inner{display:inline-block; border-bottom:1px solid #CCC; padding:0 2em;}
.section03 .title h3, .section04 .title h3{font-size:2em; font-weight:bold; color:#666;}
.section03 .title h4, .section04 .title h4{font-size:1em; color:#999;}

.top_area{margin-top:3em;}
.top_area h3{font-size:1.1em; color:#333; font-weight:bold;}
.top_area .board_area a.more{position:absolute; top:-5px; right:0px; display:block; padding:3px; color:#656260; font-size:0.8em;}
.top_area .board_area h3{border-bottom:1px solid #CCC; padding-bottom:1em; position:relative; margin-bottom:1em;}
.top_area .customer .tell{background:#333333; color:#FFF; padding:0.5em; font-size:1.5em; font-weight:bold; border-radius:3px;}
.top_area .customer .tell i{background:#1f1f1f; padding:0.7em; display:inline-block; border-radius:2px; margin-right:0.5em; font-size:0.8em;}
.top_area .customer ul{margin:5px 0 0 0; border:1px solid #CCC; padding:0.7em; list-style-type:none;}
.top_area .customer .kakao{margin-top:5px;}
.top_area .customer .kakao img{width:100%;border-radius:3px;}
.top_area .col-sm-4 .inner{background:#FFF; padding:1em; border-radius:10px; border:1px solid #CCC; min-height:252px;}

.bathroom_design_dt .bath_design{text-align:center;}
.bathroom_design_dt .bath_design .img{display:inline-block; margin-bottom:2em;}
.bathroom_design_dt h3{font-size:1.3em; font-weight:bold; border-bottom:1px solid #CCC; padding-bottom:.5em; margin-bottom:1.5em;}
.bathroom_design_dt .price_list{margin-top:3em; display:none;}
.bathroom_design_dt .price_list table{border-collapse:collapse;}
.bathroom_design_dt .price_list table td, .bathroom_design_dt .price_list table th{border:1px solid #CCC; padding:.5em; width:50%;}
.bathroom_design_dt .price_list table td{font-weight:normal; text-align:center;}
.bathroom_design_dt .price_list table th{text-align:center; background:#333; color:#FFF; font-size:1.2em; padding:.8em 0;}
.bathroom_design_dt .price_list h4{font-size:1.3em; font-weight:bold; color:#F30; margin-top:1em; text-align:center;}
.bathroom_design_dt .prod_list .tile span, .bathroom_design_dt .prod_list .product_list span{display:block; text-align:center;}
.bathroom_design_dt .prod_list .tile .inner img, .bathroom_design_dt .prod_list .product_list .inner img{border:1px solid #ebebeb; display:block; padding:.5em;}
.bathroom_design_dt .prod_list .tile .inner .brief, .bathroom_design_dt .prod_list .product_list .inner .brief{padding-top:.5em; padding-bottom:1em;}
.bathroom_design_dt .plice{margin-bottom:2em;}
.bathroom_design_dt .plice .row > div span{text-align:center; background:#1b1e31; color:#c6a154; padding:1em 0; display:block; font-weight:bold; border-radius:10px;}
.price_list table{margin-bottom:1em;}
address{margin-bottom:.5em; text-align:center; margin-right:370px; line-height:170%}
span.c_brief{display:block; padding:.5em; color:#FFF; background:#333; text-align:center;}
span.pull-left{width:50%;}
span.pull-right{width:40%; text-align:right;}
.m_bottom_cs{visibility: hidden;}
.faq_list_area img{width:100%;}
.faq_list_area span.mobile_view{display:none;}
/*.swipe-carousel{padding:1em; background:#FFF; border-radius:10px; border:1px solid #CCC;}*/
@media (max-width:1280px) {
.faq_list_area span.mobile_view{display:block;}
.faq_list_area span.pc_view{display:none;}
address{display:none;}
.wrapper{margin-bottom:3em;}
.m_bottom_cs{position: fixed; bottom:0; visibility:visible; display:table; width:100%;}
.m_bottom_cs a{display:table-cell; padding:1em 0; text-align:center; background:#1b1e31; color:#c6a154; font-weight:bold;}
.m_bottom_cs a:hover{color:#c6a154;}
.m_bottom_cs a.m_tell{border-right:1px solid #c6a154;}
}
@media (max-width:835px) {
	.top_area .customer .tell{font-size:1.3em;}
}
@media (max-width:768px) {
	.top_area .col-sm-4 .inner{min-height:0;}
.top_area .notice{margin-bottom:2em;}
.top_area .customer{display:none;}

}