@charset "utf-8";

#pages{padding-top: 81px;}
#pages.about-cont{height:calc(100% - 81px)}
#pages.about-cont .contents{height:100%;}
#pages.contact-cont{height:calc(100% - 81px)}
#pages.contact-cont .contents{height:100%;}

.company {height:100%;}
.company .about{ display: flex;align-items: center;height:100%;}
.company .about .txtbox{ position:relative;margin: 0 auto; padding-left: calc(50% - 820px); width:100%; height:100%;display: flex;justify-content: space-between;}
.company .about .txtbox .txt{display: flex;align-items: center;}
.company .about p{font-size: 20px;font-weight: normal;line-height: 1.9;color: #302d2c;word-break: auto-phrase;}
.company .about p strong { display: block; font-size: 34px; margin-bottom: 20px}
.company .about .img{height: calc(100% + 81px);}
.company .about .img img{display:block;height:100%;object-fit: cover;object-position: 50% 50%;}
.contact {display:flex;height:100%;justify-content:center;}
.contact .layout{display: flex; align-items: center;justify-content: space-between;padding-right: 120px;height:100%;}
.contact .address{}
.contact .address h3{font-size: 20px;font-weight: normal;color: #302d2c;word-break: auto-phrase;}
.contact .address ul {margin-top:40px;}
.contact .address ul li{font-size: 16px;font-weight: normal;line-height: 1.75;color: #302d2c;}
.contact .address .btn-box{display: flex;margin-top:50px;gap:30px;}
.contact .address .btn-box a {position:relative;font-size: 16px;font-weight: normal;line-height: 1.88;color: #302d2c;}
.contact .address .btn-box a:first-child {padding-right: 17px;}
.contact .address .btn-box a:first-child:before{content: "";position: absolute;top:8px;right:0;width:12px;height:12px;background: url(/_public/images2/common/link_icon.svg) no-repeat;background-size: cover;}
.contact .address .btn-box a:hover { font-weight:bold;}
.contact .address .btn-box a::after{ content: "";position:absolute;left:0;bottom:0;width: 100%; height: 1px; background: #202020; display: block;}
.contact .map-panel{width:100%;max-width:850px;height:580px;}


.portfolio{padding:50px 0 120px;}
.portfolio .list{padding-left: 270px;}
.portfolio .list ul{display: flex;flex-wrap: wrap;gap:10px;}
.portfolio .list ul li{width:calc(50% - 5px);}
.portfolio .list ul li a{position:relative;display: block;}
.portfolio .list ul li .img{position: relative;overflow: hidden;padding-top: 62%;}
.portfolio .list ul li .img img{display: block;width:100%;transition: all 0.3s;    position: absolute;top: 0;left: 0;height: 100%;object-fit: cover;}
.portfolio .list ul li:hover .img img{transform: scale(1.1);}
.portfolio .list ul li .mask {opacity:0;position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.6);-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.portfolio .list ul li .mask p {padding: 30px; position: absolute; width:100%;font-size: 24px;font-weight: 500;color: #f5f5f5;}
.portfolio .list ul li .mask p span { display: block; font-size: 16px; color: #aaa}
.portfolio .list ul li .mask strong { position: absolute; bottom: 0;padding: 30px;font-size: 15px; color:#f5f5f5; font-weight: 400}
.portfolio .list ul li .txt{display:none;margin-top:10px;}
.portfolio .list ul li .txt h4{ font-size: 14px;font-weight: 600;color: #302d2c;}
.portfolio .list ul li .txt h4 p{margin-top:2px;font-size: 12px;font-weight: normal;color: #302d2c;}
.portfolio .list ul li:hover .mask{opacity: 1;}
.portfolio .list .button-box{margin-top:60px;text-align: center; }
.portfolio .list .button-box button{position:relative;display: inline-block;width:100px;height:40px;border: 1px solid #000;text-align: center; font-size: 15px;color:#000;font-weight: normal;letter-spacing: -0.3px;}
.portfolio .list .button-box button:after{content: "";vertical-align: middle;position: relative;top: -1px;display: inline-block;margin-left:10px;width:13px;height:7px;background: url(/_public/images2/icon/btn_arrow1.svg) no-repeat;background-size: cover;}



.portfolio .view {display: flex;justify-content: space-between;gap:30px;}
.portfolio .view .item-info {width: 300px;}
.portfolio .view .item-info .sticky-box{position:sticky;top:131px;}
.portfolio .view .item-info .title-box{}
.portfolio .view .item-info .title-box h3{font-size: 24px;font-weight: 500;color: #302d2c;}
.portfolio .view .item-info .title-box p{margin-top:5px;font-size: 15px;font-weight: 500;color: #302d2c;}
.portfolio .view .item-info .txt-box1{margin-top:50px;}
.portfolio .view .item-info .txt-box1 p{font-size: 15px;font-weight: normal;line-height: 1.73;letter-spacing: -0.3px;color: #302d2c;}
.portfolio .view .item-info .txt-box1 p + p{}
.portfolio .view .item-info .txt-box2{margin-top: 440px;}
.portfolio .view .item-info .txt-box2 p{font-size: 15px;font-weight: normal;line-height: 1.73;letter-spacing: -0.3px;color: #302d2c;}
.portfolio .view .item-info .txt-box2 p + p{}


.portfolio .view .item-box {width:100%;max-width:1200px;}
.portfolio .view .item-box ul{}
.portfolio .view .item-box ul li{position: relative;width: calc(33.3333% - 14px);display: inline-block;break-inside: avoid;padding-bottom: 10px;transition: all 0.3s;}
.portfolio .view .item-box ul li a{position:relative;display: block;width:100%;height:100%;overflow: hidden;}
.portfolio .view .item-box ul li img{display: block;width:100%;transition: all 0.3s;}
.portfolio .view .item-box ul li:hover img { transform: scale(1.1);}


.search-result{padding:50px 0 120px;}
.search-result h2{text-align: center;font-size: 24px;font-weight: normal;color: #302d2c;}
.search-result .search-box{position:relative;margin: 20px auto 0;width:100%;max-width: 540px;}
.search-result .search-box .input-wrap{position: relative;border-bottom: 1px solid #aaa;}
.search-result .search-box .input-wrap input[type="text"]{width:100%;height:60px;padding:0 100px 0 30px; font-size: 20px;font-weight: normal;color: #202020;}
.search-result .search-box .input-wrap .btn-submit{position: absolute;top:17px;right:20px;display: inline-block;}
.search-result .search-box .input-wrap .btn-submit img{display: block;}
.search-result .search-box .input-wrap .btn-reset{display:none;position: absolute;top:20px;right: 65px;}
.search-result .search-box .input-wrap .btn-reset.show{display: block !important;} /* 표시용 클래스 */
.search-result .search-box .input-wrap .btn-reset img{display: block;}
.search-result section{margin-top:40px;}
.search-result section + section{margin-top:100px;}
.search-result section h3{font-size: 24px;font-weight: bold;color: #302d2c;}
.search-result section ul{margin-top:20px;display: flex;flex-wrap: wrap;gap:60px 10px;}
.search-result section ul li{position: relative;width:calc(33.3333% - 7px);}
.search-result section ul li a{display: block;position: relative;}
.search-result section ul li .img{overflow: hidden;position: relative;padding-top: 62%;}
.search-result section ul li .img img{display: block;width:100%;height:100%;transition: all 0.3s;transform: scale(1);position: absolute;top:0;left:0;object-fit: cover;}
.search-result section ul li .img .date{position: absolute;left:10px;bottom:10px;line-height: 1;padding:5px;font-size: 14px;font-weight: normal;color: #fff;background: rgba(85, 85, 85, 0.8);}
.search-result section ul li .txt{margin-top:10px;}
.search-result section ul li .txt h4{font-size: 20px;font-weight: 600;color: #302d2c;}
.search-result section ul li .txt p{margin-top:2px;font-size: 15px;font-weight: normal;color: #302d2c;}
.search-result section ul li:hover .img img{transform: scale(1.1);}
.search-result section .btn-box{margin-top:70px;display: flex;justify-content: center;}
.search-result section .btn-box button{display: flex;align-items: center;justify-content: center;width:200px;height:50px; border: solid 1px #302d2c;background-color: #fff;  font-size: 16px;font-weight: 500;letter-spacing: -0.64px;color: #302d2c;line-height: 1;}
.search-result section .no-data{display: flex;justify-content: center;align-items: center;background: #f5f5f5;padding:88px 20px;font-size: 20px;font-weight: 500;text-align: center;color: #302d2c;}


@media all and (max-width:1760px) {
}

@media all and (max-width:1640px) {

    .company .about{ }
    .company .about .txtbox { padding-left: 20px; }
    .portfolio{padding:50px 20px 120px;}
    .portfolio .view{}

    .search-result{padding:50px 20px 120px;}

    .contact{padding:0 20px;}

}

@media all and (max-width:1460px) {

    .company .about .txtbox {gap:40px;}
    .contact .map-panel{max-width: calc(100% - 550px);}


}

@media all and (max-width:1280px) {

    .company .about{height: 100%}
    .company .about p{font-size:18px;}
    .company .about p strong { font-size:30px;}



    .portfolio{padding:50px 20px 120px;}

    .portfolio .list{padding-left:150px;}
    .portfolio .list ul li .mask p{font-size:20px;padding:20px;}
    .portfolio .list ul li .mask p span{font-size:14px;}
    .portfolio .list ul li .mask strong{padding:20px;font-size:13px;}
    .portfolio .view .item-info .title-box h3{font-size:22px;}
    .portfolio .view .item-info .txt-box1{margin-top:40px;}

    .search-result h2{font-size:22px;}
    .search-result section h3{font-size:22px;}
    .search-result section ul li .txt h4{font-size:18px;}

    .contact .address h3{font-size:18px;}
    .contact .map-panel {max-width: calc(100% - 405px);}
    .contact .layout{padding-right: 0;}
}

@media all and (max-width:1024px) {
    #pages{padding-top: 61px;}
    #pages.about-cont{height:auto;}

    .quick-bar{right:20px;bottom: 28px;width:35px;}

    #pages.contact-cont{height: calc(100% - 69px)}

    .company .about{height:auto;}
    .company .about p{font-size:16px;}
    .company .about p strong { font-size: 28px;}
    .company .about .txtbox { padding-left: 0; gap:30px; flex-direction: column;align-items: flex-start;}
    .company .about .txtbox p { padding-left: 20px; padding-top: 20px;} 
    .company .about .txtbox .img { width: 100%;height:100%; }
    .company .about .txtbox .img img { width: 100%}

    .portfolio{padding:20px 20px 100px;}
    .portfolio .list{padding: 0}
    .portfolio .list ul{gap:20px 10px;}
    .portfolio .list ul li .mask{opacity: 1;background: transparent;transform: none;}
    .portfolio .list ul li .mask p{display: none;}
    .portfolio .list ul li .mask strong{left:5px;bottom:5px;display: inline-block;font-size: 12px;font-weight: normal;line-height: 1.08;color: #fff;background: rgba(85, 85, 85, 0.8);padding:5px;}
    .portfolio .list ul li .txt{display: block;}


    .portfolio .view .item-info .sticky-box{top:100px;}
    .portfolio .view .item-info .title-box h3{font-size:20px;}
    .portfolio .view .item-info .txt-box1{margin-top:30px;}
    .portfolio .view .item-info .title-box p{font-size:14px;}
    .portfolio .view .item-info .txt-box1 p{font-size:14px;}
    .portfolio .view .item-info .txt-box2{display: none;}
    .portfolio .view .item-box ul li{width:calc(50% - 10px);}

    .search-result h2{font-size:20px;}
    .search-result .search-box .input-wrap input[type="text"]{height:50px;font-size:18px;padding:0 50px 0 20px;}
    .search-result .search-box .input-wrap .btn-reset{top:18px;right:60px;}
    .search-result section h3{font-size:20px;}
    .search-result section ul{gap:40px 10px;}
    .search-result section ul li{width:calc(50% - 5px);}
    .search-result section ul li .txt h4{font-size: 16px;}
    .search-result section ul li .txt p{font-size:13px;}
    .search-result section .btn-box{margin-top:40px;}
    .search-result section .btn-box button{height:45px;font-size: 15px;}
    .search-result section .no-data{padding:80px 10px;font-size:16px;}

    .contact{padding:20px 20px 55px;}
    .contact .layout{flex-direction: column;align-items: flex-start;justify-content: flex-start;gap:30px;}
    .contact .address{width:100%;}
    .contact .address h3{font-size:16px;}
    .contact .address ul{margin-top:30px;}
    .contact .address ul li{font-size:15px;}
    .contact .address .btn-box{margin-top:30px;}
    .contact .address .btn-box a{font-size:15px;}
    .contact .map-panel{max-width:100%; height: calc(100% - 230px);}

}

@media all and (max-width:768px) {
    #pages.about-cont{}
    #pages.contact-cont{height: auto;min-height: calc(100% - 37px);}

    .company .about {padding-bottom:20px;}
    .company .about p strong { font-size: 26px; letter-spacing: -0.5px;}


    .portfolio .list ul li{width:100%;}
    .portfolio .view{flex-direction: column;}
    .portfolio .view .item-info .sticky-box{position: relative;top:0;}
    .portfolio .view .item-info .title-box h3{font-size:18px;}

    .search-result h2{text-align: left;font-size:18px;}
    .search-result .search-box{max-width:100%;}
    .search-result section h3{font-size:18px;}
    .search-result section ul{gap:20px;}
    .search-result section ul li{width:100%;}
    .search-result section ul li .img .date{font-size:12px;}
    .search-result section ul li .txt h4{font-size: 14px;}
    .search-result section ul li .txt p{font-size:12px;}

    .contact .map-panel{height: 300px;}
}

@media all and (max-width:460px) {
    .portfolio .view .item-box ul li{width:100%;}
}


@media all and (max-width:360px) {
    .portfolio .view .item-box ul li{width:100%;}
    .company .about p strong { font-size: 24px;}
}