@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.menu .checkbox input:checked + label:before {background: #da251c url("/images/bbs/checkbox.png") 50% 50% no-repeat; border-color: #da251c;} 
.menu .checkbox input#color01 + label:before {background-color: #fff;} 
.menu .checkbox input#color02 + label:before {background-color: #faf2ef;} 
.menu .checkbox input#color03 + label:before {background-color: #e4d1a9;} 
.menu .checkbox input#color04 + label:before {background-color: #997e67;} 
.menu .checkbox input#color05 + label:before {background-color: #d9d9d9;} 
.menu .checkbox input#color06 + label:before {background-color: #797a74;} 
.menu .checkbox input#color07 + label:before {background-color: #000;} 

.product-option {display: flex; padding-bottom: 40px; border-bottom: 1px solid #ddd; margin-bottom: 60px;} 
.product-option .menu {padding-left: 40px; height: auto; position: relative; flex: 1;} 
.product-option .menu:not(:last-child):before {position: absolute; content: ''; width: 1px; height: calc(100% - 50px); right: 0; bottom: 0; border-right: 1px solid #ddd;} 
.product-option .menu .tit {font-weight: 600; font-size: 20px; color: #2c2c2c; padding-bottom: 20px;} 
.product-option .menu li {padding: 3px 0;} 

.brand-head {display:flex; align-items:center;} 
.brand-head .info {width:50%; padding-right:50px;} 
.brand-head .info .logo {margin-bottom:40px;} 
.brand-head .info .title {font-size:34px; line-height:1.4em; color:#da251c; font-weight:600; margin-bottom:30px;} 
.brand-head .info .title span {color:#2c2c2c;} 
.brand-head .info ul li {position:relative; font-size:18px; line-height:1.4em; margin-bottom:5px; padding-left:15px;} 
.brand-head .info ul li:before {content:""; position:absolute; top:9px; left:0; width:4px; height:4px; background:#da251c; border-radius:100%;} 
.brand-head .photo {width:50%; text-align:right;} 
.brand-head .photo .txt {font-size:18px; line-height:1.4em; padding-top:10px; font-family: 'Frank Ruhl Libre','Pretendard', serif;} 

.brand-tit {font-size:28px; line-height:1.4em; color:#2c2c2c; font-weight:600; margin-bottom:20px;} 

.brand-photo ul {display:flex; flex-wrap:wrap; margin-left:-16px; margin-bottom:-16px;} 
.brand-photo ul li {padding-left:16px; margin-bottom:16px;} 
.brand-photo ul li:nth-child(2) {width:62.5%} 
.brand-photo ul li:nth-child(1) {width:37.5%} 
.brand-photo ul li:nth-child(4) {width:37.5%} 
.brand-photo ul li:nth-child(3) {width:62.5%} 

.brand-factory ul {display:flex; margin-left:-20px;} 
.brand-factory ul li {padding-left:20px;} 

.company-title {font-size:64px; line-height:1.5em; color:#2c2c2c; font-weight:500; margin-bottom:60px; padding-top:20px; font-family: 'Frank Ruhl Libre','Pretendard', serif;} 

.company-head {display:flex;} 
.company-head .photo {width:calc(100% - 520px);} 
.company-head .info {width:520px; color:#2c2c2c; padding-top:50px;} 
.company-head .info .content {margin-bottom:50px; padding-left:50px;} 
.company-head .info .tit {font-size:28px; line-height:1.4em; font-weight:600; margin-bottom:20px;} 
.company-head .info .cnt {font-size:20px; line-height:1.6em;} 
.company-head .info .cnt strong {font-weight:600;} 
.company-head .box {position:relative; margin-left:-80px; background:#fff; padding:50px;} 
.company-head .box:after {content:""; position:absolute; top:0; left:0; width:100%; height:115px; border:12px solid #da251c; border-bottom:0;} 
.company-head .box dl {margin-bottom:30px;} 
.company-head .box dl:last-child {margin-bottom:0;} 
.company-head .box dl dt {font-size:24px; line-height:1.4em; color:#da251c; font-weight:600; margin-bottom:5px;} 
.company-head .box dl dd {font-size:18px; line-height:1.4em;} 

.company-text {margin-bottom:90px; color:#2c2c2c;} 
.company-text .tit {font-size:28px; line-height:1.4em; font-weight:600; margin-bottom:20px;} 
.company-text .cnt {font-size:20px; line-height:1.6em;} 
.company-text .cnt strong {font-weight:600;} 

.company-why {display:flex; align-items:center; background:#da251c; color:#fff; font-weight:300; font-size:18px; line-height:1.6em; margin-bottom:80px;} 
.company-why .photo {width:calc(100% - 540px);} 
.company-why .info {width:540px; padding-left:40px;} 
.company-why .info .tit {font-size:36px; line-height:1.4em; font-weight:600; margin-bottom:30px;} 
.company-why .info .txt {margin-bottom:30px;} 

.company-tip {margin-bottom:70px;} 
.company-tip ul {display:flex; flex-wrap:wrap; margin-left:-30px; margin-bottom:-30px;} 
.company-tip ul li {width:calc(33.333333% - 30px); margin-left:30px; margin-bottom:30px; border:1px solid #dfdfdf; padding:33px 36px;} 
.company-tip ul li .tit {color:#da251c; font-size:24px; line-height:1.4em; font-weight:600; margin-bottom:20px;} 
.company-tip ul li .cnt {font-size:18px; line-height:1.6em;} 

.sub-tit {color:#2c2c2c; font-size:26px; line-height:1.4em; font-weight:600; margin-bottom:10px;} 

.company-family ul {display:flex; flex-wrap:wrap; margin-left:-20px;} 
.company-family ul li {width:20%; padding-left:20px; text-align:center;} 
.company-family ul li .pic {position:relative; height:0; padding-bottom:35.7%;} 
.company-family ul li .pic.border {border : 1px solid #ddd;}
.company-family ul li .pic img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;} 
.company-family ul li .tit {font-size:18px; line-height:1.6em; margin-top:10px;} 

.system-head {display:flex; /* margin-bottom:60px; */} 
.system-head.between {justify-content: space-between;}
/* .system-head.reverse {flex-direction: row-reverse;} */

.system-head.between .info {width:auto;}
.system-head .title {position:absolute; top:25px; left:0; font-size:64px; line-height:1.4em; color:#2c2c2c; font-weight:500; font-family: 'Frank Ruhl Libre','Pretendard', serif;} 
.system-head .info {width:510px} 
.system-head .photo {width:calc(100% - 510px);} 
.system-head .text {padding-top:200px;} 
.system-head .text .tit {color:#da251c; font-size:24px; line-height:1.4em; font-weight:600; margin-bottom:10px;} 
.system-head .text .cnt {font-size:18px; line-height:1.6em; color:#2c2c2c;} 
/* .system-head.type2 .info {margin-top:-185px;}  */
.system-head.type2 .text {padding-top:80px;} 
.system-head.type3 .text {display:flex; flex-direction: column; justify-content: center; height: 100%; padding-top:0;}

.btn-more {display:block; position:relative; width: 180px; height: 40px;  margin-top:50px; padding:0 30px; border: 1px solid #edd; background-color: #fff; border-radius: 50vh; color: #2c2c2c; line-height: 38px;}
.btn-more::after {content: ""; position: absolute; top:50%; right:30px; transform: translateY(-50%); width:20px; height:13px; background: url(../images/sub/arrow-more.png) no-repeat 50% 50%/contain;}

.img-list {display:flex; margin:0 -10px;}
.img-list .img {padding:0 10px;}

.system-dps {background:#f4f4f4; text-align:center; padding:100px 0; margin-bottom:65px;} 
.system-dps .logo {margin-bottom:30px;} 
.system-dps .cnt {margin-bottom:30px;} 
.system-dps .cnt .tit {font-size:36px; line-height:1.5em; color:#da251c; font-weight:600; margin-bottom:10px;} 
.system-dps .cnt p {font-size:18px; line-height:1.6em;} 
.system-dps ul {display:flex; margin-left:-30px;} 
.system-dps ul li {width:14.2875%; padding-left:30px; text-align:center; font-size:16px; line-height:1.6em;} 
.system-dps ul li .icon {margin-bottom:10px;} 

.system-dps.type2 ul {margin-left:0;}
.system-dps.type2 ul li {width: 16.6666%;}
.system-dps.type2 ul li .tit {font-weight:500; font-size: 18px; line-height:1.888em;}

.system-title {margin-bottom:35px;} 
.system-title .tit {color:#2c2c2c; font-size:36px; line-height:1.5em; font-weight:600; margin-bottom:10px;} 
.system-title p {color:#878787; font-size:18px; line-height:1.5em; letter-spacing:0.44em;} 
.system-zone {margin-bottom:30px;} 
.system-zone:last-child {margin-bottom:80px;} 

.system-link {background:url('../images/sub/system_bg.jpg') 50% 50% no-repeat; background-size:cover; display:table; width:100%; height:435px; text-align:center; color:#fff;} 
.system-link .cell {width:100%; height:100%; display:table-cell; vertical-align:middle;} 
.system-link .tit {font-size:58px; line-height:1.5em; font-weight:500; font-family: 'Frank Ruhl Libre','Pretendard', serif; margin-bottom:20px;} 
.system-link .cnt {font-size:20px; line-height:1.6em;} 
.system-link .main-more {margin-top:30px;} 
.system-link .main-more a {color:#fff; border-color:#fff;} 
.system-link .main-more a span:before,
.system-link .main-more a span:after {background:#fff} 

.location {display:flex; background:#222; align-items:center; margin-bottom:50px;} 
.location .col {width:50%;} 
.location ul {padding-left:30px;} 
.location ul li {margin-bottom:34px; display:flex; align-items:center;} 
.location ul li:last-child {margin-bottom:0;} 
.location ul li .icon {width:72px; height:72px; background:#333; border-radius:100%; overflow:hidden;} 
.location ul li .info {padding-left:20px;} 
.location ul li .info .tit {font-size:16px; line-height:1.4em; color:#878787; font-weight:500;} 
.location ul li .info p {font-size:22px; line-height:1.4em; color:#fff;} 

.root_daum_roughmap {width:100% !important; height:490px !important;} 
.root_daum_roughmap .wrap_map {height:490px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.roughmap_lebel_text:after {content:"페데스탈 코리아"; font-size:12px; line-height:15px;} 

.vbox-close {top: 30px; right: 30px;} 
.vbox-next span, .vbox-prev span {display: none;} 
.vbox-next, .vbox-prev {width: 50px; height: 50px; margin: 0; background-color: #8e8e8e; background-repeat: no-repeat; background-position: 50% 50%; border-radius: 100%;} 
.vbox-next:hover, .vbox-prev:hover {background-color: #da251c;} 
.vbox-next {right: 100px; background-image: url('../images/bbs/slide_next.png');} 
.vbox-prev {left: 100px; background-color: #8e8e8e; background-image: url('../images/bbs/slide_prev.png');} 

.bottom-list {padding: 30px 0;} 
.bottom-list .cnt-tit {font-family: 'Frank Ruhl Libre', serif; position: relative; margin-bottom: 20px;} 
.bottom-list .cnt-tit:before {position: absolute; content: ''; bottom: 0; left: 0; height: 1px; width: 100px; border-bottom: 1px solid #000;} 


.drop-wrap {position:relative; z-index:50; margin-bottom: 40px;} 
.drop-wrap .wrap {max-width:1855px; margin:0 auto;} 
.drop-wrap .inner {display: flex; justify-content: center; gap: 10px;} 
.drop-wrap .part {position:relative; max-width: 300px; width: 100%;} 
.drop-wrap .part > a {border:1px solid #222; line-height:58px; max-width:300px; width:100%; padding-left:20px; display:block; background:#fff; position:relative; font-size: 18px; letter-spacing:-0.03em;} 
.drop-wrap .part > a:after {content:""; position:absolute; top:50%; right: 28px; margin-top:-7px; width:17px; height:10px; background:url("../images/common/dropdown_arrow.png") 50% 50% no-repeat; transition: .3s;} 
.drop-wrap .part.active > a:after {transform: scaleY(-1);} 
.drop-wrap .part > ul {display:none; position:absolute; background: #fff; border: 1px solid #222; z-index: 10; width: 100%; margin-top: -1px; max-height: 900px; overflow-y: auto;} 
 .drop-wrap .part > ul.color .img {display: inline-block; vertical-align: text-top; margin-right: 20px; width: 18px; height: 18px;} 
.drop-wrap .part > ul > li {font-size: 16px;} 
.drop-wrap .part > ul > li:last-child {border-bottom:0;} 
.drop-wrap .part > ul> li a {display: block; line-height: 40px; background: #f8f8f8; border-bottom: 0; padding-left: 20px; letter-spacing: -0.03em; padding: 5px 20px;} 
.drop-wrap .part > ul> li a:hover,
.drop-wrap .part > ul> li.active a {color:#fff; background:#d12533;} 
.drop-wrap .part > ul> li a.more:hover .img img {filter: brightness(0) invert(1);}
.drop-wrap .btn-search {background-color: #000; width: 60px; display: flex; justify-content: center; align-items: center;} 
.drop-wrap .btn-search .img {width: 20px; height: 20px;} 

.story {padding:60px 0;background: #f4f4f4;}
.story-list {position:relative;} 
.story-list .item-sizer {width: 50%;} 
.story-list .items {margin:0 -10px -20px;} 
.story-list .item {float:left; width: 100%; padding:0 10px 20px; transform:translateY(30px); opacity:0; transition:.7s; text-align:center;} 
.story-list .item.w50 {width:50%;}
.story-list .item.active {transform:translateY(0); transition-delay:.2s; opacity:1;} 
.story-list .item a {position:relative; display:block;} 
.story-list .item .img {transition:.3s; position:relative;} 
.story-list .item .img img {display:block; width:100%;} 
/* add */


.wood-list-wrap .drop-wrap .part.brand {display:none;}