@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.about{display:flex;}
.about .left{margin-right:125px;}
.about .left .tt{margin-bottom:55px;font-size:50px;line-height:1.2em;font-weight:700;letter-spacing:-.02em;}
.about .tt-wrap{min-width:0;width:1%;flex:1 1 auto;}
.about .tt-wrap p{margin-bottom:30px;}
.about .tt-wrap p:last-child{margin-bottom:0;}

.cate-menu{margin-bottom:60px;}
.cate-menu ul{display:flex;}
.cate-menu ul li{flex:1;}
.cate-menu ul li a{display:flex;justify-content:center;align-items:center;height:60px;text-align:center;color: #8c5048;font-size:18px;font-weight:500;line-height:1.2em;background-color: #fff;}
.cate-menu ul li.active a{background-color: #8c5048;color: #fff;}

.doc-list{border-top:2px solid #454545;border-bottom:1px solid #ddd;padding:40px 0 45px;margin-bottom:80px;}
.doc-list ul{display:flex;flex-wrap:wrap;margin:0 -15px -45px;}
.doc-list ul li{width:25%;padding:0 15px;margin-bottom:45px;text-align:center;}
.doc-list ul li .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden;}
.doc-list 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:contain; transition:0.3s;}
.doc-list ul li .tit{margin-top:20px;font-size:18px;font-weight:600;line-height:1.4em;}

.detail-pop .fancybox-close {top:-14px;right:-14px;width:29px;height:29px;background:url('../images/sub/close.png')no-repeat 50% 50%/contain;border-radius:100%;}
.detail-pop .fancybox-skin {background:transparent;}
.detail-pop	.detail-pg{width:90vw; max-width:800px; background:#000; overflow:hidden;}
.detail-pop	.detail-pg .pic{position:relative; height:0; padding-bottom:100%; overflow:hidden;}
.detail-pop	.detail-pg .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:contain; transition:0.3s;}

.contact{display:flex;}
.contact .maps{width:580px;margin-right:60px;}
.contact .maps .root_daum_roughmap {width:100% !important; height:100% !important;}
.contact .maps .root_daum_roughmap .wrap_map {height:100% !important;}
.contact .maps .roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.contact .maps .map_border{display:none;}
.contact .maps .roughmap_lebel_text:after {content:"크리스탈 펠리스"; font-size:12px; line-height:15px;}
.contact .right{min-width:0;width:1%;flex:1 1 auto;}
.contact .right .inq .input-wrap{margin-bottom:50px;}
.contact .right .inq .input-wrap .row{margin-bottom:25px;}
.contact .right .inq .input-wrap .row:last-child{margin-bottom:0;}
.contact .right .inq .input-wrap .row label{display:inline-block;margin-bottom:10px;font-weight:700;letter-spacing:-.02em;}
.contact .right .inq .input-wrap .row input.input{background-color: #000;color: #fff;}
.contact .right .inq .input-wrap .row textarea.input{background-color: #000;color: #fff;}
.contact .right .inq .input-wrap .row input#email{margin:0;}
.contact .right .inq .form-agree{display:flex;align-items:center;margin:0;}
.contact .right .inq .form-agree .check{min-width:0;width:1%;flex:1 1 auto;color: #fff;margin:0;margin-right:20px;}
.contact .right .inq .form-agree .check a{color: #505050;}
.contact .right .inq .form-agree .btn-send{display:flex;justify-content:center;align-items:center;width:130px;height:50px;background-color: #8c5048;color: #fff;font-size:18px;font-weight:500;line-height:1.2em;cursor:pointer;border:none;}