@charset "utf-8";
.product-group {margin-bottom: 55px;}
.product-group:last-of-type {margin-bottom: 0;}
.product-group.product-group-last {margin-bottom: 55px;}
.product-group2 {margin-top: 55px;}

.doc-tit h2 {margin-bottom: 14px; padding-left: 30px; position: relative; font-family:'NanumSquare', sans-serif; color:#2c2c2c; font-size:24px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.doc-tit h2:before {content:""; position: absolute; width: 20px; height: 20px; background: url(../images/sub/mark.png)50% 50% no-repeat; left: 0; top:5px;}
.doc-tit h2 span {color:#ed1c24; font-size:18px; font-weight:400; line-height:1.4em; letter-spacing:-.03em;}
.doc-txt p {color:#505050; font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.03em;}
.doc-txt p.tt {font-size:17px; margin-bottom: 40px;}
.doc-txt p span {color:#ed1c24; font-weight: 500;}
.doc-list ul {display:flex; flex-wrap:wrap; margin: 0 -10px;}
.doc-list ul li {width: 25%; padding: 0 10px;}
.doc-list ol li {margin-bottom: 3px; text-indent: -0.67em; padding-left: 0.67em; color:#505050; font-size:18px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}
.doc-link ul {display:flex; margin: 0 -5px;}
.doc-link ul li {width: 183px; height: 64px; padding: 0 5px;}
.doc-link ul li a {display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; border:1px solid #ccc; color:#505050; font-size:18px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}
.doc-link img {margin-left: 15px;}

.doc-con {display:flex; flex-wrap:wrap; height: 320px;} 
.doc-con > div {width: 50%;} 
.doc-con .text {border:1px solid #ddd; display: flex; align-items: center; border-left:none;}
.doc-con .text p {margin-left: 60px; color:#505050; font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.03em;}
.doc-con .text ul {margin-left: 60px;}
.doc-con .text ul li {position: relative; margin-bottom: 10px; color:#505050; font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.03em; padding-left: 17px;}
.doc-con .text ul li:before {content:""; position: absolute; width: 6px; height: 6px; background-color: #ed1c24; border-radius:100%; left: 0; top:11px;}

.product-img {text-align: center; border:1px solid #dfdfdf; padding: 40px 0;}
.product-img .thumb {position:relative; padding-bottom:33.333333%; overflow:hidden;}
.product-img .thumb 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%; max-height:100%; object-fit:contain;}

.color-table {background-color: #f4f4f4; text-align: center; padding: 63px 0;}
.color-table h2 {margin-bottom: 8px; font-family:'NanumSquare', sans-serif; color:#2c2c2c; font-size:24px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.color-table p {margin-bottom: 28px; color:#505050; font-size:17px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}
.color-table p span {color:#ed1c24; font-weight: 500;}
.color-table ul {display:flex; flex-wrap:wrap; justify-content: center;}
.color-table ul li {padding: 0 16px;}
.color-table ul li .img {border-radius:100%; overflow:hidden; border:1px solid #dfdfdf;}
.color-table ul li p {margin-bottom: 0; margin-top: 9px; color:#2c2c2c; font-size:18px; font-weight:500; line-height:1.4em; letter-spacing:-.04em;}

.fire-system .doc-txt .text {margin-top: 18px;}
.fire-system .doc-txt p {padding-left: 15px; position: relative; margin-top: 2px; color:#505050; font-size:18px; font-weight:300; line-height:1.556em; letter-spacing:-.03em;}
.fire-system .doc-txt p:before {content:""; position: absolute; width: 5px; height: 5px; border-radius:100%; background-color: #ed1c24; left: 0; top: 11px;}

.gray-content {background-color: #f4f4f4; text-align: center; padding: 63px 0;}
.gray-content h2 {margin-bottom: 24px; font-family:'NanumSquare', sans-serif; color:#2c2c2c; font-size:36px; font-weight:800; line-height:1.4em; letter-spacing:-.03em;}
.gray-content h2.anti-fire-h2 {font-weight: 700; font-size:24px; margin-bottom: 4px;}

.gray-content .con1 {border-bottom:1px solid #ddd;}
.gray-content .con1 p {margin-bottom: 28px; color:#505050; font-size:17px; font-weight:300; line-height:1.588em; letter-spacing:-.03em;}
.gray-content .con1 p span {color:#ed1c24; font-weight: 500;}
.gray-content .con1 ul {display:flex; flex-wrap:wrap; justify-content: center; margin-bottom: 32px;}
.gray-content .con1 ul li {padding: 0 25px;}
.gray-content .con1 ul li p {margin-bottom: 0; margin-top: 12px; color:#2c2c2c; font-size:18px; font-weight:500; line-height:1.471em; letter-spacing:-.04em;}

.gray-content.anti-fire-gray .con1 ,.gray-content.Styrofoam-gray .con1 {border-bottom:none;}
.gray-content.anti-fire-gray .con1 ul ,.gray-content.Styrofoam-gray .con1 ul {margin-bottom: 0;}

.gray-content .con2 p {padding: 20px 0;  color:#ed1c24; font-size:20px; font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.gray-content .con2 ul {display:flex; flex-wrap:wrap; margin: 0 -15px;}
.gray-content .con2 ul li {width: 33.33333%; padding: 0 15px;}

.gray-content .con3 {display:flex; align-items: center;}
.gray-content .con3 .img {width: 50%;}
.gray-content .con3 .text {width: 50%; margin-left: 60px; text-align: left;}
.gray-content .con3 .text .txt h3 {margin-bottom: 3px; font-family:'NanumSquare', sans-serif; color:#ed1c24; font-size:24px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.gray-content .con3 .text .txt p {margin-bottom: 3px; color:#505050; font-size:18px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}
.gray-content .con3 .text .txt {position: relative; padding: 30px 0;}
.gray-content .con3 .text .txt:before {content:""; position: absolute; width: 100%; height: 1px; border-bottom:1px solid #ddd; top: 0;}
.gray-content .con3 .text .txt:first-of-type:before {display:none;}
.gray-content .con3 .text .txt ul li {margin-bottom: 3px; padding-left: 1.2em; text-indent: -1.2em; color:#878787; font-size:16px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}

.anti-con1 .tit {margin-bottom: 30px; font-family:'NanumSquare', sans-serif; color:#ed1c24; font-size:24px; font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.anti-con1 .items {display:flex; flex-wrap:wrap; margin: 0 -16px;}
.anti-con1 .items .item {width: 33.33333%; padding: 0 16px;}
.anti-con1 .items .item .con {position: relative; border:1px solid #dfdfdf; padding: 40px; height: 190px;}
.anti-con1 .items .item .con .num {display:flex; align-items: center; justify-content: center; width: 46px; height: 46px; background-color: #ed1c24; color:#fff; font-size:18px; font-weight:700; line-height:1.4em; letter-spacing:-.04em; border-radius:100%;}
.anti-con1 .items .item .con p {margin-top: 17px; color:#2c2c2c; font-size:18px; font-weight:500; line-height:1.444em; letter-spacing:-.04em;}
.anti-con1 .items .item .con .icon {position: absolute; bottom: 0; right: 40px;}

.anti-con1 .table {margin-top: 30px; text-align: center;}
.anti-con1 .table table {width:100%; border-collapse:collapse;}
.anti-con1 .table.bg table tr:nth-of-type(odd) {background-color: #fef5f6;}
.anti-con1 .table table th {padding: 15px 0; border:1px solid #dfdfdf; border-top:1px solid #a8a8a8; background-color: #fafafa; color:#2c2c2c; font-size:16px; line-height: 1.5em; letter-spacing: -.04em; font-weight: 500;}
.anti-con1 .table table th:first-of-type ,.anti-con1 .table table td:first-of-type {border-left:none;}
.anti-con1 .table table th:last-of-type ,.anti-con1 .table table td:last-of-type {border-right:none;}
.anti-con1 .table table td {padding: 15px 0; border:1px solid #dfdfdf; color:#505050; font-size:16px; line-height: 1.375em; letter-spacing: -.03em; font-weight: 300;}

.anti-con2 p {color:#505050; font-size:18px; font-weight:300; line-height:1.4em; letter-spacing:-.03em;}
.anti-con2 .box {margin: 30px 0; padding-left: 60px; display: flex; flex-direction: column; justify-content: center; background-color: #fafafa; height: 200px;}
.anti-con2 .box .tit {margin-bottom: 18px; color:#ed1c24; font-size:20px; font-weight:500; line-height:1.4em; letter-spacing:-.03em;}
.anti-con2 .box .txt {color:#505050; font-size:16px; font-weight:300; line-height:1.625em; letter-spacing:-.03em;}
.anti-con2 .box .txt span {color:#2c2c2c; font-size:18px; font-weight:500;}

.anti-con2 .btn a {display:inline-block; border:1px solid #ccc; padding: 17px 50px; color:#505050; font-size:18px; line-height: 1.5em; letter-spacing: -.03em; font-weight: 300;}
.anti-con2 .btn a img {vertical-align: middle; margin-left: 18px;}

.Styrofoam-gray h2 {margin-bottom: 30px; font-weight: 700; font-size: 24px;}
.Styrofoam-gray .txt {margin-top: 18px; color:#505050; font-size:16px; line-height: 1.375em; letter-spacing: -.03em; font-weight: 300;}
.Styrofoam-gray .txt span {display:inline-block; margin-bottom: 5px; color:#2c2c2c; font-size:18px; line-height: 1.375em; letter-spacing: -.04em; font-weight: 500;}

.about-company {text-align: center;}

.doc-map .map-info table {width:100%; border-collapse:collapse; margin-top: 30px; text-align: center;}
.doc-map .map-info table th {border-top:1px solid #a8a8a8 !important; background-color: #fafafa; border:1px solid #ddd; padding: 15px 0; color:#2c2c2c; font-size:16px; line-height: 1.375em; letter-spacing: -.04em; font-weight: 500;}
.doc-map .map-info table td {border:1px solid #ddd; padding: 15px 0; color:#505050; font-size:16px; line-height: 1.375em; letter-spacing: -.04em; font-weight: 300;}
.doc-map .map-info table td:first-of-type ,.doc-map .map-info table th:first-of-type {border-left:none;}
.doc-map .map-info table td:last-of-type ,.doc-map .map-info table th:last-of-type {border-right:none;}

.company .introduce {display:flex; flex-wrap:wrap; align-items: center; padding-bottom: 60px; border-bottom:1px solid #ddd;}
.company .introduce .con {width: 50%;}
.company .introduce .text {padding-left: 60px;}
.company .introduce .text p {color:#505050; font-size:18px; line-height: 1.556em; letter-spacing: -.03em; font-weight: 300; margin-bottom: 20px;}
.company .introduce .text p:last-of-type {display:flex; justify-content: space-between;}
.company .introduce .text p span {color:#2c2c2c; font-size:18px; line-height: 1.556em; letter-spacing: -.03em; font-weight: 500;}
.company .introduce .text p strong {color:#2c2c2c; font-size:24px; font-weight: 700;}
.company .logo {margin-top: 65px;}
.company .logo ul {display:flex; flex-wrap:wrap; margin: 0 -35px;}
.company .logo ul li {width: auto; padding: 0 35px;}

.history h2 {margin-bottom: 60px; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; padding: 20px 0; background-color: #f4f4f4; text-align: center; font-family:'NanumSquare', sans-serif; color:#505050; font-size:28px; font-weight:700; line-height:1.3em; letter-spacing:-.04em;}
.history h2 span {color:#ed1c24; font-size:28px; font-weight:700;}

.history .items {position:relative;}
.history .items:before {content:""; position:absolute; top:10px; left:36%; bottom:28px; width:1px; background:#ddd;}
.history .items .item {display:flex; position: relative; margin-bottom: 26px;}
.history .items .bullet:after {content:""; position:absolute;  left:-2px; margin: 2px 0 0 -8px; width:20px; height:20px; background:#fff; border:5px solid #dfdfdf; border-radius:100%;}

.history .items h3 {position: relative; margin-top: -10px; width: 36%; font-family:'NanumSquare', sans-serif; color:#ed1c24; font-size:40px; font-weight:700; line-height:1.3em; letter-spacing:-.04em;}
.history .items h3:before {content:""; position: absolute; width: 75%; height: 1px; background-color: #dfdfdf; top:27px; right: 0;}
.history .items .con-list {position: relative; padding: 6px 0; flex:1 1 auto; min-width: 0; width: 1%;}
.history .items .con-list:before {content:""; position: absolute; width: 100%; height: 1px; background-color: #ddd; bottom: 0;}
.history .items .item:last-of-type .con-list:before {display:none;}
.history .items .con-list .list {margin-left: 49px; margin-bottom: 3px;}
.history .items .con-list .list li {margin-bottom: 24px; color:#505050; font-size:18px; font-weight:300; line-height:1.3em; letter-spacing:-.04em;}
.history .items .con-list .list li span {color:#878787; font-size:16px;}

.name-popup {display:none; position: relative; width: 1000px; height: 750px; padding:20px; background:#fff; overflow:auto;}

.popup-close {position: absolute; top:-80px; right: 0; width: 60px; height: 60px; background: url(../images/sub/popup-close.png)50% 50% no-repeat; text-indent: -9999em; overflow: hidden;}


.image-popup {position: relative !important; width: 1000px; height: 750px; background:#fff;}
.image-popup .slick-arrow {position:absolute; top:50%; transform:translate(0 ,-50%); z-index: 100; width:60px; height:60px; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; border:0; overflow:hidden; text-indent:-9999em; transition:.2s;}
.image-popup .slick-prev {left: -80px; background-image:url("../images/main/image-pop-prev.png");}
.image-popup .slick-next {right: -80px; background-image:url("../images/main/image-pop-next.png");}
.image-popup .items .item .img {position:relative; padding-bottom:75%; overflow:hidden;}
.image-popup .items .item .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}