@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
/* sub01_01 인사말 */
.greeting .img-box {margin-bottom:60px;}
.greeting .txt {text-align:center;}
.greeting .txt h3 {font-size:36px; line-height:1.1em; margin-bottom:40px; font-family:'NanumMyeongjo'; position:relative; display:inline-block;}
.greeting .txt h3 strong {font-family:'Gmarket Sans'; font-size:60px;}
.greeting .txt p {font-size:20px; line-height:1.8em; color:#555; margin-bottom:46px;}
/* sub01_02 회사개요 */
.outline .cnt01 {margin-bottom:105px;}
.outline .cnt01 ul {display:flex; flex-wrap:wrap; margin-left:1px; margin-bottom:1px;}
.outline .cnt01 li {width:33.333333%; margin-left:-1px; margin-bottom:-1px; border:1px solid #ddd; padding:50px 0; text-align:center; display:flex; flex-direction:column; align-items:center;}
.outline .cnt01 .img-box {margin-bottom:4px;}
.outline .cnt01 h4 {font-size:20px; line-height:1.3em; margin-bottom:16px;}
.outline .cnt01 p {font-size:24px; line-height:1.2em; font-weight:300; color:#555;}
.outline .line {width:100%; height:1px; background:#0c4da2; position:relative;}
.outline .line:after {content:''; width:71px; height:75px; background:url('../images/sub/outline-line.jpg') 0 0 no-repeat; background-size:cover; position:absolute; left:50%; margin-left:-36px; margin-top:-38px;}
.outline .cnt02 {margin-top:140px;}
.outline .cnt02 .box {display:flex; margin:0 -35px 55px; justify-content:center;}
.outline .cnt02 .box .img-box {padding:0 35px; text-align:center;}
.outline .cnt02 .box01 .img-box {width:33.3333333%;}
.outline .cnt02 .box02 .img-box {width:33.3333333%;}
.outline .cnt02 .pic {position:relative;}
.outline .cnt02 .pic:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid #ddd;}
.outline .cnt02 p {font-size:18px; line-height:1.4em; font-weight:300; margin-top:16px; color:#555; font-weight:300;}
/* tab-common */
.doc-tab .tabs {display:flex; width:100%; border:1px solid #ddd; justify-content:center;}
.doc-tab .tabs li {padding:0 25px; position:relative;}
.doc-tab .tabs li:after {content:''; width:1px; height:13px; background:#ddd; position:absolute; right:0; top:50%; margin-top:-7px;}
.doc-tab .tabs li:last-child:after {display:none;}
.doc-tab .tabs li a {display:block; line-height:58px; font-size:18px; font-weight:500; position:relative;}
.doc-tab .tabs li.active a:after {content:''; width:100%; height:5px; background:#0c4da2; position:absolute; bottom:-1px; left:0;}
/* sub01_03 연혁 */
.history .tab-cnt {margin-bottom:94px;}
.history .cnt {display:flex;}
.history .img-box {width:31.42%; padding-right:90px;}
.history .img-box .img {position:relative;}
.history .img-box .img:after {content:''; width:134px; height:133px; background:url('../images/sub/history01-01.jpg') 0 0 no-repeat; background-size:cover; position:absolute; bottom:-32px; right:-22px; z-index:-1;}
.history .img-box .img p {position:absolute; top:0; left:0; line-height:95px; background:rgba(0,0,0,0.3); font-size:30px; font-weight:700; color:#fff; padding-left:30px; width:100%;}
.history .wrap {width:1%; flex:1 1 auto;}
.history .col {display:flex; position:relative; padding-bottom:40px;}
.history .col:after {content:''; width:1px; background:#ddd; height:100%; left:130px; top:0; position:absolute;}
.history .col:last-child:after {display:none;}
.history .col .year {width:130px; font-size:30px; font-weight:700; color:#414143; position:relative;}
.history .col .year:after {content:''; width:27px; height:27px; background:#fff; border:7px solid #2b70cb; position:absolute; right:-14px; top:0; border-radius:50%; z-index:1;}
.history .col .row {width:1%; flex:1 1 auto; padding-left:75px;}
.history .col .row li {font-size:16px; line-height:1.8em; color:#555;}
/* sub01_04 조직도 */
.organization {text-align:center;}
/* doc-tit */
.doc-tit {font-size:26px; line-height:1.5em; font-weight:700; padding-left:40px; position:relative;}
.doc-tit:before {content:''; width:23px; height:23px; background:url('../images/bbs/doc-tit.png') 0 0 no-repeat; background-size:cover; position:absolute; top:8px; left:0;}
/* sub01_05 오시는길 */
.directions .wrap {margin-bottom:70px;}
.directions .doc-tit {margin-bottom:20px;}
.directions .root_daum_roughmap {width:100% !important; height:600px !important;}
.directions .root_daum_roughmap .wrap_map {height:600px !important;}
.directions .roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.directions .roughmap_lebel_text:after {font-size:12px; line-height:15px;}
.directions .wrap01 .roughmap_lebel_text:after {content:"퓨처하우징 본점";}
.directions .wrap02 .roughmap_lebel_text:after {content:"KCC창호 퓨처하우징";}
.directions ul {display:flex; justify-content: center; border-bottom:1px solid #ddd; margin:0 -50px; padding:40px 0 55px;}
.directions ul li {padding:0 50px; display:flex; align-items:center; border-right:1px solid #ddd;}
.directions ul li:last-child {border-right:0;}
.directions li .icon-box {margin-right:30px;}
.directions li .txt h4 {font-size:18px; line-height:1.3em; margin-bottom:8px}
.directions li .txt p {font-size:16px; line-height:1.5em; color:#555;}
/* sub02_01 KCC창호 소개 */
.kccwindow {letter-spacing:-.025em;}
.kccwindow .tab-cnt {margin-bottom:70px;}
.kcc-cnt {margin-bottom:100px;}
.kcc-cnt .tit {text-align:center; margin-bottom:60px;}
.kcc-cnt .tit p {font-size:24px; line-height:1.2em; font-weight:500;}
.kcc-cnt .img-box {margin-bottom:100px;}
.kcc-cnt .img-box ul {display:flex; margin:0 -20px}
.kcc-cnt .img-box li {width:50%; padding:0 20px;}
.kcc-cnt .box ul {display:flex; flex-wrap:wrap; margin:0 -20px -50px;}
.kcc-cnt .box li {width:50%; padding:0 20px; margin-bottom:50px; display:flex;}
.kcc-cnt .box li .icon-box {width:124px;}
.kcc-cnt .box li .tt {width:1%; flex:1 1 auto; padding-left:20px;}
.kcc-cnt .box li .tt h4 {font-size:20px; line-height:1.3em; margin-bottom:12px;}
.kcc-cnt .box li .tt p {font-size:18px; line-height:1.5em; color:#555;}
.kcc-accessory .wrap {margin-bottom:90px;}
.kcc-accessory .doc-tit {margin-bottom:30px;}
.kcc-accessory ul {display:flex; flex-wrap:wrap; margin:0 -15px;}
.kcc-accessory ul li {width:25%; padding:0 15px; margin-bottom:40px; text-align:center;}
.kcc-accessory ul li p {font-size:20px; line-height:1.4em; font-weight:700; margin-top:20px;}
.kcc-select ul {display:flex; flex-wrap:wrap; margin:0 -30px;}
.kcc-select ul li {width:50%; padding:0 30px; margin-bottom:60px;}
.kcc-select ul li .img-box {margin-bottom:30px;}
.kcc-select ul li h3 {font-size:26px; line-height:1.2em; margin-bottom:16px;}
.kcc-select ul li p {font-size:18px; color:#555; line-height:1.4em;}
/* doc-tit2 */
.doc-tit2 {font-size:24px; line-height:1.5em; font-weight:700; padding-left:35px; position:relative;}
.doc-tit2:before {content:''; width:22px; height:19px; background:url('../images/bbs/doc-tit2.png') 0 0 no-repeat; background-size:cover; position:absolute; top:8px; left:0;}
/* sub02_02 */
.tab-normal .tabs {display:flex;}
.tab-normal .tabs li {width:100%;}
.tab-normal .tabs li a {font-size:18px; line-height:51px; display:block; border-bottom:3px solid #0c4da2; text-align:center; background:#eeeeee; position:relative;}
.tab-normal .tabs li a:after {content:''; width:1px; height:51px; background:#fff; position:absolute; top:0; right:0; z-index:1;}
.tab-normal .tabs li:last-child a:after {display:none;}
.tab-normal .tabs li.active a {font-weight:700; background:#0c4da2; color:#fff; z-index:2;}
.tab-normal .tabs li.active a:after {background:#0c4da2;}
.tab-normal .type01 .tabs li {width:16.6666667%;}

.window .img-box {margin-bottom:80px;}
.window .doc-tit2 {margin-bottom:8px;}
.window .cnt01 {margin-bottom:36px;}
.window .cnt01 ul {padding-left:5px;}
.window .cnt01 li {position:relative; font-size:16px; color:#555; line-height:1.8em; padding-left:16px;}
.window .cnt01 li:before {content:''; width:3px; height:3px; border-radius:50%; background:#555; position:absolute; top:14px; left:0;}
.window .cnt02 {margin-bottom:50px;}
.window .cnt02 ul {display:flex; margin:0 -11px;}
.window .cnt02 ul li {width:20%; padding:0 11px; text-align:center;}
.window .cnt02 li .icon-box {border:4px solid #ddd; border-radius:10px; text-align:center; height:93px; display:flex; align-items:center; justify-content:center; position:relative;}
.window .cnt02 li .icon-box:before {content:''; width:30px; height:4px; background:#32509c; position:absolute; top:-4px; left:22px;}
.window .cnt02 li .icon-box h4 {font-size:18px; line-height:1.4em; padding-left:68px; display:inline-block; position:relative;}
.window .cnt02 li .icon-box h4:before {content:''; width:60px; height:60px;  background-size:cover; position:absolute; left:0; top:50%; margin-top:-30px; background-repeat:no-repeat; background-size:cover;} 
.window .cnt02 li:nth-child(1) .icon-box h4:before {background-image:url('../images/sub/window-icon01.png');}
.window .cnt02 li:nth-child(2) .icon-box h4:before {background-image:url('../images/sub/window-icon02.png');}
.window .cnt02 li:nth-child(3) .icon-box h4:before {background-image:url('../images/sub/window-icon03.png');}
.window .cnt02 li:nth-child(4) .icon-box h4:before {background-image:url('../images/sub/window-icon04.png');}
.window .cnt02 li:nth-child(5) .icon-box h4:before {background-image:url('../images/sub/window-icon05.png');}
.window .cnt02 li p {font-size:16px; line-height:1.5em; color:#555; margin-top:26px;}
.window .items:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid #ddd;}
.window .slick-arrow {position:absolute; width:48px; height:48px; top:50%; margin-top:-24px; z-index:11; border:0; background-color:transparent; font-size:0; background-repeat:no-repeat; background-size:cover;}
.window .slick-prev {background-image:url('../images/sub/short-window-prev.png'); left:25px;}
.window .slick-next {background-image:url('../images/sub/short-window-next.png'); right:25px;}
/* sub03_01 그린리모델링 */
html.header-fixed .lnb-fiexd {position:fixed; top:0; left:0; width:100%; z-index:111; background:#fff;}
.remodeling .cnt.dn:first-child {height:0; padding:0;}
.remodeling .cnt {padding:40px 0;}
.remodeling .doc-tit {margin-bottom:24px;}
.remodeling .bd-box {border:1px solid #ddd; padding:36px 40px; background:#fff; margin-bottom:22px;}
.remodeling .flex-box {display:flex;}
.remodeling h3 {font-size:22px; line-height:1.4em; margin-bottom:14px;}
.remodeling .check {padding-left:26px; position:relative;}
.remodeling .check:before {content:''; width:16px; height:12px; background:url('../images/bbs/check.png') 0 0 no-repeat; background-size:cover; position:absolute; left:0; top:50%; margin-top:-6px;}
.remodeling .list-dot {padding-left:15px;}
.remodeling .list-dot li {font-size:18px; line-height:1.6em; color:#555; padding-left:15px; position:relative;}
.remodeling .list-dot li:before {content:''; width:3px; height:3px; background:#555; position:absolute; top:13px; left:0; border-radius:50%;}
.remodeling .cnt01 .bg-box {background:url('../images/sub/remodeling01-bg.jpg') center right no-repeat; background-size:cover; width:100%; height:100%;}
.remodeling .cnt01 .flex-box .txt {width:50%;}
.remodeling .cnt01 .flex-box .img-box {width:50%; text-align:center; padding-left:30px;}
.remodeling .cnt01 .flex-box .img-box img {box-shadow:10px 10px 10px rgba(205,205,205,0.75)}
.remodeling .cnt01 ul.imgs {display:flex; margin:60px -25px 0; padding-left:40px;}
.remodeling .cnt01 ul.imgs li {padding:0 25px; position:relative;}
.remodeling .cnt01 ul.imgs li:after {content:''; width:20px; height:20px; background:url('../images/sub/remodeling-plus.png') 0 0 no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-10px; right:-10px;}
.remodeling .cnt01 ul.imgs li:last-child:after {display:none;}
.remodeling .cnt01 ul.imgs .inner {position:relative;}
.remodeling .cnt01 ul.imgs .inner p {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:700; line-height:1.6em; color:#fff; letter-spacing:-.025em;}
.remodeling .cnt02 .img-box {margin-top:70px; text-align:center;}
.remodeling .cnt03 .flex-box {margin:0 -30px;}
.remodeling .cnt03 .box {width:50%; padding:0 30px;}
.remodeling table {width:100%; border-collapse:collapse; border-spacing:0; margin-top:30px;}
.remodeling table th {border:1px solid #6aab0d; background:#f0f6e6; font-size:16px; font-weight:500; line-height:1.5em; padding:14px 0;}
.remodeling table td {text-align:center; border:1px solid #6aab0d;}
.remodeling .table01 table td {padding:16px 10px; font-size:14px; font-weight:700; line-height:1.5em;}
.remodeling .table01 table td strong {font-size:22px; line-height:1.2em; display:block;}
.remodeling .table02 table td {font-size:16px; line-height:1.4em; padding:14px 10px;}
/* sub04 자격 및 인증현황 */
.qualification {padding:50px 0 0 0; border-top:2px solid #868686;}
.qualification ul {display:flex; flex-wrap:wrap; margin:0 -18px;}
.qualification ul li {padding:0 18px; width:25%; text-align:center; margin-bottom:50px;}
.qualification ul li .pic {position:relative; height:0; padding-bottom:147.68%; overflow:hidden;}
.qualification ul li .pic:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid #ddd;}
.qualification ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.qualification ul li .tit {font-size:18px; line-height:1.4em; font-weight:300; margin-top:16px;}
/* sub07 견적문의 */
.inquiry .tit {margin-bottom:25px; padding-left:40px; display:flex; align-items:center;}
.inquiry .tit .img-box {width:75px;}
.inquiry .tit .txt {width:1%; flex:1 1 auto; padding-left:28px;}
.inquiry .tit .txt p {font-size:18px; line-height:1.4em;}
/* sub08 협력사 */
.partners {padding:50px 0 0 0; border-top:2px solid #868686;}
.partners ul {display:flex; flex-wrap:wrap; margin:0 -18px;}
.partners ul li {padding:0 18px; width:20%; text-align:center; margin-bottom:50px;}
.partners ul li .pic {position:relative; height:0; padding-bottom:60.12%; overflow:hidden;}
.partners ul li .pic:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; border:1px solid #ddd;}
.partners ul li .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.partners ul li .tit {font-size:18px; line-height:1.4em; font-weight:500; margin-top:16px;}