/* common */
.sub_pad{padding: 260px 0 120px;}
.s_tit{}
.s_tit h2{font-weight:600; font-size:23px; color: #222; text-transform: uppercase;}
.s_tit h3{font-weight:300; font-size:16px; color: #222; margin-top: 9px;}

.project{animation:opacity 0.6s 0.4s both}
.project .project_list{display:flex; flex-wrap:wrap;}
.project .project_list .item{position:relative; width: calc((100% - 186px) / 4); margin-right: 62px; margin-bottom:40px; overflow: hidden;}
.project .project_list .item:nth-of-type(4n){margin-right: 0;}
.project .project_list .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.project .project_list .item figure{position:relative; overflow: hidden; padding-bottom:120%;}
.project .project_list .item figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); max-width: inherit; height: 100%;}
.project .project_list .item .hover{position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #00000090; }
.project .project_list .item .hover h2{position:absolute; bottom: 0; left: 0; width: 100%; font-weight:300; font-size:16px; color: #fff; padding: 20px;}

.project_view{}
.project_view figure{text-align: center;}
.project_view .top .txt{margin: 130px 0 100px;}
.project_view .top .txt h2{position:relative; font-size:16px; color: #222; letter-spacing:0; margin-bottom:20px;}
.project_view .top .txt h2::before{content:""; position:absolute; top: -30px; left: 0; width: 5px; height: 1px; background: #2e2e2e;}
.project_view .top .txt ul{}
.project_view .top .txt ul li{font-size:16px; font-weight:300; color: #888888; margin-bottom:20px;}
.project_view .top .txt ul li:last-of-type{margin-bottom:0;}
.project_view .top .txt p{font-weight:300; font-size:16px; color: #888888; margin-top: 76px; line-height: 1.6;}
.project_view .img_list figure{margin-bottom:70px;}
.project_view .img_list figure:last-of-type{margin-bottom:0;}

.about{}
.about figure{margin: 100px 0 60px;}
.about .txt p{font-weight:300; font-size:16px; color: #666666; line-height: 1.6; margin-bottom:30px;}
.about .txt p:Last-of-type{margin-bottom:0;}

.contact{}
.contact .flex_box{display:flex;}
.contact .flex_box .txt{width: calc(50% - 132px);}
.contact .flex_box .txt .s_tit{margin-bottom:100px;}
.contact .flex_box .txt p{font-weight:300; font-size:16px; color: #666; line-height: 1.6; margin-bottom:45px;}
.contact .flex_box .txt ul{}
.contact .flex_box .txt ul li{font-weight:300; font-size:16px; color: #666; margin-bottom:16px;}
.contact .flex_box .txt ul li:last-of-type{margin-bottom:0;}
.contact .flex_box .txt ul li span{font-weight:500; font-size:16px; color: #666;}
.contact .flex_box figure{width: calc(50% + 132px);}\

.request{}
.request .input_wrap{margin-top: 100px;}
.request .input_wrap h3{font-weight:300; font-size:16px; color: #666; line-height: 1.5;}
.request .input_wrap .flex_box{display:flex; margin-top: 80px;}
.request .input_wrap .flex_box .box{width: 33.33%;}
.request .input_wrap .flex_box .box:last-of-type{display:flex; flex-wrap:wrap; width: 66.66%;}
.request .input_wrap .flex_box .box dl{width: calc(100% - 80px); margin-bottom:66px;}
.request .input_wrap .flex_box .box dl:last-of-type{margin-bottom:0;}
.request .input_wrap .flex_box .box dl dt{font-size:16px; color: #222222; margin-bottom:5px;}
.request .input_wrap .flex_box .box dl dd{}
.request .input_wrap .flex_box .box dl dd.textarea{}
.request .input_wrap .flex_box .box dl dd.date{}
.request .input_wrap .flex_box .box dl dd.date p{position:relative; height: 40px; border-bottom: 1px solid #ccc; cursor: pointer;}
.request .input_wrap .flex_box .box dl dd.date p span{font-weight:300; font-size:16px; color: #666666; line-height: 40px;	}
.request .input_wrap .flex_box .box dl dd.date p img{position:absolute; top: 50%; right: 20px; transform:translateY(-50%);}
.request .input_wrap .flex_box .box dl dd input{height: 40px; width: 100%; border:none; border-bottom: 1px solid #cccccc; outline:none; font-size:16px; color: #222; font-weight:400;}
.request .input_wrap .flex_box .box dl dd input#datepicker{color: #666;}
.request .input_wrap .flex_box .box dl dd input::placeholder{font-weight:300; font-size:16px; color: #ccc;}
.request .input_wrap .flex_box .box dl dd textarea{height: 161px; width: 100%; border: 1px solid #cccccc; outline:none; font-size:16px; color: #222; font-weight:400; resize:none; padding: 25px 20px;}
.request .input_wrap .flex_box .box dl dd textarea::placeholder{font-weight:300; font-size:16px; color: #ccc;}
.request .input_wrap .flex_box .box:last-of-type dl{width: calc(50% - 40px); margin-right: 80px;}
.request .input_wrap .flex_box .box:last-of-type dl:nth-of-type(2){margin-right: 0;}
.request .input_wrap .flex_box .box:last-of-type dl:last-of-type{width: 100%; margin-right: 0;}
.request .input_wrap .flex_box .box:last-of-type dl:last-of-type dt{margin-bottom:17px;}
.request .input_wrap .btn{margin-top: 66px; text-align: right;}
.request .input_wrap .btn button{width: 105px; height: 40px; background: #222222; color: #fff; font-size:16px; cursor: pointer;}

.request .input_wrap .btn button:hover{color: #222; border:1px solid #222; background: #fff;}
/* 달력 */
.ui-widget.ui-widget-content{width: 100% !important; max-width: 400px; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;}
.ui-datepicker .ui-datepicker-title{font-weight:400; font-size:20px; color: #222;}
.ui-datepicker .ui-datepicker-header{background: #fff; border:none; padding: 10px 0;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top: 17px; cursor: pointer;}
.ui-datepicker .ui-datepicker-next{right: 16px;}
.ui-datepicker .ui-datepicker-prev{left: 16px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{text-align: center; font-size:16px; color: #999; background: transparent; border:none; width: 40px; height: 40px; box-sizing:border-box; line-height: 34px; margin: 0 7px;} 
.ui-datepicker th span{font-weight:300; font-size:16px; color: #666;}
.ui-datepicker th span[title="Sunday"]{color: #d21616;}
.ui-datepicker table tr td:first-of-type a{color: #d21616;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover ,.ui-state-hover:not(.ui-datepicker-next, .ui-datepicker-prev){border-radius:50%; background: #222; color: #fff !important;}
.ui-state-hover:not(.ui-datepicker-next, .ui-datepicker-prev),.ui-widget-content .ui-state-hover:not(.ui-datepicker-next, .ui-datepicker-prev),.ui-widget-header .ui-state-hover:not(.ui-datepicker-next, .ui-datepicker-prev),.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus,.ui-button:hover,.ui-button:focus {
	border-radius:50%; background: #222; color: #fff !important;
}
.ui-state-hover.ui-datepicker-next, .ui-state-hover.ui-datepicker-prev{border:none; background-color: transparent; }

.ui-state-hover.ui-datepicker-next{right: 16px;}
.ui-state-hover.ui-datepicker-prev{left: 16px;}

@keyframes opacity{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@media (max-width: 1400px){
	.sub_pad{padding: 180px 0 100px;}
	.project .project_list .item{width: calc((100% - 60px) / 4); margin-right: 20px; margin-bottom:20px;}

	.contact .flex_box .txt .s_tit{margin-bottom:50px;}
	.contact .flex_box .txt p{margin-bottom:20px;}
	
	.request .input_wrap{margin-top: 50px;}
	.request .input_wrap .flex_box{margin-top: 40px;}
}

@media (max-width: 1200px){
	.sub_pad{padding: 140px 0 60px;}

	.project .project_list .item{width: calc((100% - 40px) / 3);}
	.project .project_list .item:nth-of-type(4n){margin-right: 20px;}
	.project .project_list .item:nth-of-type(3n){margin-right: 0;}

	.project_view .top .txt{margin: 70px 0 50px;}
	.project_view .top .txt p{margin-top: 40px;}
	.project_view .top .txt ul li,
	.project_view .top .txt h2{margin-bottom:10px;}
	.project_view .top .txt h2::before{top: -16px;}

	.about figure{margin: 40px 0 30px;}
	.about .txt p{margin-bottom:20px;}
}

@media (max-width: 1000px){
	.contact .flex_box{flex-wrap:wrap}
	.contact .flex_box .txt{width: 100%; order:3; margin-top: 40px;}
	.contact .flex_box figure{width: 100%;}
	.contact .flex_box .txt .s_tit{margin-bottom:10px;}
	.contact .flex_box .txt p{margin-bottom:10px;}
	.contact .flex_box .txt ul li{margin-bottom:8px;}
	
	.request .input_wrap{margin-top: 30px;}
	.request .input_wrap .flex_box{flex-wrap:wrap; margin-top: 20px;}
	.request .input_wrap .flex_box .box{width: 100%; margin-bottom:30px;}
	.request .input_wrap .flex_box .box dl{width: 100%;margin-bottom:30px;}
	.request .input_wrap .flex_box .box dl:last-of-type{margin-bottom:0;}
	.request .input_wrap .flex_box .box:last-of-type{width: 100%;}
	.request .input_wrap .flex_box .box:last-of-type dl{margin-right: 20px; width: calc(50% - 10px);}
	.request .input_wrap .btn{margin-top: 30px;}

}


@media (max-width: 800px){
	.s_tit h3{margin-top: 5px;}
	.project .project_list .item{width: calc((100% - 20px) /2);}
	.project .project_list .item:nth-of-type(3n),
	.project .project_list .item:nth-of-type(4n){margin-right: 20px;}
	.project .project_list .item:nth-of-type(2n){margin-right: 0;}
	.project .project_list .item .hover{top: 0 !important; left: 0 !important; position:static; background: transparent;}
	.project .project_list .item .hover h2{padding: 14px 20px 10px; font-weight:500; margin-top: 6px; /* background: #00000090; */}

	.about figure{position:relative; padding-bottom:220px; overflow: hidden;}
	.about figure img{position:absolute; top: 0; left: 40%; transform:translateX(-50%); max-width: inherit; height: 100%;}
	.about .txt p br{display:none;}

	.contact .flex_box .txt{margin-top: 20px;}

}