@charset "utf-8";



/* 회사소개 */
.company .section1 .s-text-div{left:240px;left: 240px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}
.company .section1 .s-text-div{}
.company .section1 .s-text-div .text-1{margin-bottom:30px;}
.company .section1 .s-text-div .text-1 p{display:inline-block;font-size: 46px;line-height: 72px;color:#fff;position: relative;}
.company .section1 .s-text-div .text-1 p:before,
.company .section1 .s-text-div .text-1 p:after{position: absolute;background-size: 100% auto !important;content:'';width: 37px;height: 30px;}
.company .section1 .s-text-div .text-1 p:before{top: -14px;left: -40px;background: url(/pc/include/img/icon/icon-q1.png) no-repeat center center;}
.company .section1 .s-text-div .text-1 p:after{bottom:-14px;right:53px;background: url(/pc/include/img/icon/icon-q2.png) no-repeat center center;}
.company .section1 .s-text-div p{font-size: 22px;line-height: 38px;color:#fff;letter-spacing: -1px}

/* 포트폴리오 */

.con{max-width:1200px;width:100%;margin:90px auto 0 auto;padding-bottom: 200px;}

.outlineText{font-weight: 700;font-family: 'Poppins',sans-serif;
	font-size: 40px;line-height: 45px;
	color: #000;
/*   -webkit-text-fill-color: #fff; */
/*   -webkit-text-stroke-width: 1px; */
/*   -webkit-text-stroke-color: #000; */
  letter-spacing: -0.3px;
  overflow:hidden;
}
.outlineText span{display:inline-block;font-weight: 700;font-family: 'Poppins',sans-serif;
	font-size: 40px;line-height: 52px;
	color: #000;}

.boldText{font-size: 40px;line-height: 50px;color:#000;font-weight: 700;font-family: 'Poppins',sans-serif;overflow:hidden;}
.boldText span{font-size: 40px;line-height: 50px;color:#000;font-weight: 700;font-family: 'Poppins',sans-serif;display:inline-block;}
.boldText1{font-size: 40px;line-height: 50px;color:#000;font-weight: 700;font-family: 'Poppins',sans-serif;overflow:hidden;}
.boldText1 span{font-size: 40px;line-height: 50px;color:#000;font-weight: 700;font-family: 'Poppins',sans-serif;display:inline-block;}
    
.f-blue{color:#1988ff}    
.f-blue span{color:#1988ff !important}    
    
    
.portfolio .list{}

/* .portfolio .con{padding-top:91px;background: #fff;width:1200px;margin:0 auto;padding:91px 0 130px;} */

.portfolio .b-txt{margin:40px 0 100px;
	-webkit-box-align: start;
    align-items: flex-start;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}
.portfolio .b-txt p{color:#000;font-size: 36px;line-height: 45px;letter-spacing: -1.4px;font-weight: 700;margin-bottom:20px;text-align: left;overflow: hidden;position: relative;}
.portfolio .b-txt p:last-child{margin-bottom:0;}
.portfolio .b-txt p span{display:inline-block;color:#000;font-weight: 700;font-family: 'Poppins',sans-serif;}
.portfolio .b-txt p.btxt2 span{color:#0080d5;}
.portfolio .b-txt p span.black{color:#000;}

.li-f-c{}
.li-f-c p{color:#000 !important;}
.li-f-c span{color:#000 !important;}







.portfolio .list{margin-bottom:130px;}
.portfolio .list ul{font-size: 0;}
.portfolio .list ul li{width: 50%;display:inline-block;}
.portfolio .list ul li a{overflow:hidden;position:relative;width: 600px;height:400px;box-sizing: border-box;display:flex;justify-content: space-between;flex-direction: column;}
.portfolio .list ul li a .view{position:relative;}
.portfolio .list ul li a .image{width: 100%;height: 100%;}
.portfolio .list ul li a .image img{width: 100%;height:100%;transition: transform .5s ease-in-out;}
/* .portfolio .list ul li a:hover .image img{transform: scale(1.05);} */
.portfolio .list ul li a .video{
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.portfolio .list ul li a .txt1{display:none;font-size: 14px;font-family: 'Poppins',sans-serif;font-weight: 700;line-height: 14px;letter-spacing: -0.3px;color:#fff;margin-bottom:19px;}
.portfolio .list ul li a .txt2{margin-bottom:20px;display:none;}
.portfolio .list ul li a .txt2 span:nth-child(1){font-size: 22px;font-family: 'SpoqaHanSansNeo',sans-serif;font-weight: 700;line-height: 22px;letter-spacing: -1px;color:#fff;    vertical-align: top;margin-right:10px;}
.portfolio .list ul li a .txt2 span:nth-child(2){font-size: 16px;font-family: 'SpoqaHanSansNeo',sans-serif;font-weight: 700;line-height: 24px;letter-spacing: -0.7px;color:#07698d;background: #fff;border-radius:16px;padding:0 10px;    vertical-align: top;}
.portfolio .list ul li a .txt2-1{opacity:0;display:none;font-size: 22px;font-family: 'SpoqaHanSansNeo',sans-serif;font-weight: 700;line-height: 22px;letter-spacing: -1px;color:#fff;vertical-align: top;margin-bottom:20px;}
.portfolio .list ul li a:hover .txt2{
/* 	display:none; */
/* 	opacity: 0; */
/* 	transform: translate3d(0px, 20px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); */
}
.portfolio .list ul li a:hover .txt2-1{
	display:none;opacity: 0;
/* 	display:block;opacity: 1; */
/* 	transform: translate3d(0px,0, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); */
}

.portfolio .list ul li a .txt3{font-size: 18px;font-family: 'SpoqaHanSansNeo',sans-serif;font-weight: 400;line-height:24px;letter-spacing:-0.9px;color:#fff;width:421px;
	opacity: 0;
    transform: translate3d(-10px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
    word-break:keep-all;
}
.portfolio .list ul li a .txt4{display:none;font-size: 14px;font-family: 'Poppins',sans-serif;font-weight: 700;line-height: 14px;letter-spacing: -0.1px;color:#fff;
	opacity: 1;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.portfolio .list ul li a:hover .txt3{
	opacity: 1;
    transform: translate3d(0, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.portfolio .list ul li a:hover .txt4{
	opacity: 1;
/* 	opacity: 0; */
/* 	transform: translate3d(0px, 20px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); */
}

.portfolio .list ul li a .over{
	display: none; opacity:0;
	position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 400px;
    transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.portfolio .list ul li a:hover .over{display:block;opacity: 1;}
.portfolio .list ul li a .over div{width: 100%; height: 100%;transform-origin: center;}
.portfolio .list ul li:nth-child(1) a .over div{background: linear-gradient(-45deg, #d8c2e2, #0085ab);}
.portfolio .list ul li:nth-child(2) a .over div{background: linear-gradient(-45deg, #b6e1cb, #e1c156);}
.portfolio .list ul li:nth-child(3) a .over div{background: linear-gradient(-45deg, #62a91a, #828ca3);}
.portfolio .list ul li:nth-child(4) a .over div{background: linear-gradient(-45deg, hsla(206.66666666666663, 5.52%, 31.96%, 1.00), hsla(120, 43.87%, 49.61%, 1.00))}

.portfolio .list ul li a .txt-link {
	font-size: 14px;font-family: 'Poppins',sans-serif;line-height: 14px;letter-spacing: -0.1px;color:#fff;font-weight:700;
    position: absolute;
    left: 36px;
    top: auto;
    right: auto;
    bottom: 36px;
/*     text-decoration: underline; */
    transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transform: translate3d(0px, 10px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    opacity: 0;
}
.portfolio .list ul li a:hover .txt-link {
    opacity: 0;
/*     opacity: 1; */
	transform: translate3d(0px, 0, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}


/* 레이어팝업 */
.layer-wrap{position:fixed;max-width:1200px;background:#fff;left:-9999em;top:50%;min-height:300px;
-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)  ; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)  ;
}
.layer-wrap.active{left:50%;}
.layer-wrap .b-close{position: absolute;top:20px;right:20px;font-size: 0;
width:40px;height:40px;background: url(/pc/include/img/icon/icon-close.png) no-repeat center center;z-index: 10;cursor: pointer;
background-size: 20px 20px;
}
.layer-wrap .popup-layer-content{padding:1rem;overflow-y:auto;max-height:80vh}
.layer-wrap .title{color:#000;font-weight: 700;margin-bottom:1rem !important}
.layer-wrap .title:after{display: none;}


.portfolio-popup{width:1123px;height:631px;}
.portfolio-popup .is-con{width:100%;height:100%;}


/* 상담하기 */
.emailInquiryUl li{position: relative;padding-left:15px;}
.emailInquiryUl li+li{margin-top:20px;}
.emailInquiryUl li:after{content:'';position:absolute;top:20px;left:0;margin-top:5px;width:6px;height:6px;border-radius:50%;border:1px solid #4f4f4f;}
.emailInquiryUl li p{font-size: 16px;line-height: 20px;color:#4f4f4f;font-weight: 700;line-height: 60px}
.emailInquiryUl li input{width: 100%;height: 60px;font-size: 18px;line-height: 60px;color:#000;padding:0 23px;background: #f8f8f8;}
textarea{width:100%;resize: none;background: #f8f8f8;height:180px;padding:20px;font-size: 18px;line-height:30px;letter-spacing: 1px;}
input,textarea{outline: none;border-radius:8px;border:none;color:#000;letter-spacing:-0.5px;font-family: 'SpoqaHanSansNeo', sans-serif;}
*:focus {
    outline: none;
}
input::placeholder,textarea::placeholder {
  color: #828282;
}


.flex-center{display:flex;justify-content: center;}
.flex-end{display:flex;justify-content: flex-end;}

.map-div{margin:58px 0 150px;width: 100%;overflow: hidden;height:311px;}

.contact-div{display: flex;flex-direction: row}
.contact-div .div-left{width:400px;}
.contact-div .div-right{flex: 1;}

.p-contact-btn{
	display: inline-block;
	background: #1988ff;
	font-size:14px;
	line-height: 36px;
	height:36px;
	border-radius: 8px;
	padding:0 16px;
	color:#fff;
	margin-top:20px;
	cursor:pointer;
}
.p-contact-btn1{
	display: inline-block;
	background: #0069f7;
	font-size:18px;
	line-height:60px;
	height:60px;
	border-radius: 8px;
	padding:0 33px;
	color:#fff;
	margin-top:20px;
	letter-spacing: -1px;
	cursor:pointer;
}
.p-contact-btn2{
	display: inline-block;
	background: #1988ff;
	font-size:18px;
	line-height:60px;
	height:60px;
	border-radius: 8px;
	padding:0 33px;
	color:#fff;
	margin-top:20px;
	letter-spacing: -1px;
	cursor:pointer;
}
.contact-div .bTxt{margin-bottom:10px;}
.contact-div .eTxt{margin-bottom:30px;}
.bTxt{font-size: 20px;line-height: 45px;color:#000;letter-spacing: -0.5px;font-weight: 700}
.eTxt{font-size: 16px;line-height: 28px;color:#000;letter-spacing: -1px;}