@charset "utf-8";

/* portfolio */
.portfolio_con .tab{font-size:0; text-align:center;}
.portfolio_con .tab li{display:inline-block; padding:5px 15px; position:relative}
.portfolio_con .tab li a{display:block; font-size:16px; font-weight:200; color:#9b9b9b; letter-spacing:-0.05em;}
.portfolio_con .tab li:before{content:''; width:1px; height:9px; background:rgba(255,255,255,0.4); position:absolute; right:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.portfolio_con .tab li:last-child:before{content:none; display:none;}
.portfolio_con .tab li.on a{color:#fff; font-weight:300;}
.portfolio_con .tab li:hover a{color:#fff; font-weight:300;}

.portfolio_con .item{margin-top:15px;}
.portfolio_con .item:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.portfolio_con .item li{width:calc(25% - 15px); height:285px; float:left; margin-right:20px; margin-top:20px; overflow:hidden}
.portfolio_con .item li:nth-of-type(4n){margin-right:0;}
.portfolio_con .item li a{display:block; position:relative; }
.portfolio_con .item li a .bg{display:none; position:absolute; z-index:1000; left:0; top:0; width:100%; height:285px; background:rgba(16,25,60,0.6)}
.portfolio_con .item li a .bg > span{text-align:left; z-index:1; display:block; width:100%; padding:15px; box-sizing:border-box; word-break:keep-all; position:absolute;  font-size:14px; color:#fff; letter-spacing:-0.05em;}
.portfolio_con .item li a .text{position:absolute; z-index:1; left:0; padding:0 15px; bottom:15px; width:100%; box-sizing:border-box;}
.portfolio_con .item li a .text h2{font-size:18px; font-weight:bold; color:#fff; letter-spacing:-0.05em;}
.portfolio_con .item li a .text p{font-size:14px; color:#8e8e8e;}
.portfolio_con .item li a img{height:285px; position:absolute; left:50%; top:0; transform:translateX(-50%)}

.portfolio_con .list_btn{margin-top:60px; margin-bottom:150px}
.portfolio_con .list_btn ul{font-size:0; text-align:center;}
.portfolio_con .list_btn ul li{display:inline-block; margin:0 3px; width:30px; height:30px; border:1px solid rgba(255,255,255,0.4); border-radius:50%; line-height:30px; }
.portfolio_con .list_btn ul li a{display:block; font-size:12px; color:rgba(255,255,255,0.4);}
.portfolio_con .list_btn ul li.on{background:#383838; border-color:#383838;}
.portfolio_con .list_btn ul li.on a{color:#fff}
.portfolio_con .list_btn ul li:hover{background:#383838; border-color:#383838;}
.portfolio_con .list_btn ul li:hover a{color:#fff}

.read_common{position:relative; width:100%; height:619px; overflow:hidden}
.read_common img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%);}
.read_common h2{z-index:1; font-size:40px; color:#fff; text-align:center; width:90%; letter-spacing:-0.05em; font-weight:bold; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%);}

.read_con{margin-top:60px; margin-bottom:80px;}
.read_con h3{font-size:24px; color:#fff; letter-spacing:-0.05em; text-align:center; font-weight:bold;}
.read_con table{width:100%; max-width:400px; margin:0 auto; margin-top:30px; margin-bottom:80px;}
.read_con table tr th{text-align:left; padding:10px; font-size:20px; color:#b5b5b5; letter-spacing:-0.05em;}
.read_con table tr td{padding:10px; font-size:18px; color:#f7f7f7; letter-spacing:-0.05em;}
.read_con img{max-width:100%; margin:10px auto;}

.read_list table{width:100%;  border-top:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(255,255,255,0.2)}
.read_list table tr td{line-height:50px; font-size:14px; cursor:pointer;}
.read_list table tr td img{vertical-align:middle; margin-left:10px;}
.read_list table tr th{line-height:50px; font-size:16px; text-align:left; font-weight:300; cursor:pointer;}
.read_list table tr th{width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.read_list table tr{border-bottom:1px solid rgba(255,255,255,0.2)}
.read_list table tr:last-child{border:0;}
.read_list a.chart{font-size:14px; color:#232222; letter-spacing:-0.025em; margin-bottom:150px; margin-top:15px; display:block; float:right; width:87px; height:31px; text-align:center; line-height:31px; background:#a8bbfd}

@media all and (max-width:1200px){	
	.inner{width:93.5%}
	.portfolio_con .item li{width:calc(33.333% - 20px); margin-top:30px; margin-right:30px;}
	.portfolio_con .item li:nth-of-type(4n){margin-right:30px;}
	.portfolio_con .item li:nth-of-type(3n){margin-right:0;}
}
@media all and (max-width:767px){
	.portfolio_con .item li{width:calc(50% - 15px);}
	.portfolio_con .item li:nth-of-type(4n){margin-right:30px;}
	.portfolio_con .item li:nth-of-type(4n){margin-right:30px;}
	.portfolio_con .item li:nth-of-type(3n){margin-right:30px;}
	.portfolio_con .item li:nth-of-type(2n){margin-right:0;}
}
@media all and (max-width:640px){
	.portfolio_con .tab li{padding:0.78125vw 2.34375vw;}
	.portfolio_con .tab li a{}
	.portfolio_con .tab li:before{}

	.portfolio_con .item{margin-top:2.34375vw;}
	.portfolio_con .item li{width:calc(50% - 2.34375vw); height:44.53125vw; margin-right:4.6875vw; margin-top:4.6875vw;}
	.portfolio_con .item li:nth-of-type(4n){margin-right:4.6875vw;}
	.portfolio_con .item li:nth-of-type(4n){margin-right:4.6875vw;}
	.portfolio_con .item li:nth-of-type(3n){margin-right:4.6875vw;}
	.portfolio_con .item li:nth-of-type(2n){margin-right:0;}

	.portfolio_con .item li a .bg{height:44.53125vw}
	.portfolio_con .item li a .bg > span{padding:2.34375vw; }
	.portfolio_con .item li a .text{padding:0 2.34375vw; bottom:2.34375vw;}
	.portfolio_con .item li a .text h2{ }
	.portfolio_con .item li a .text p{}
	.portfolio_con .item li a img{height:44.53125vw}

	.portfolio_con .list_btn{margin-top:9.375vw; margin-bottom:23.4375vw}
	.portfolio_con .list_btn ul li{}


	.read_common{height:96.71875vw;}
	.read_common h2{font-size:6.25vw;}

	.read_con{margin-top:9.375vw; margin-bottom:12.5vw;}
	.read_con h3{font-size:3.75vw; }
	.read_con table{width:100%; margin-top:4.6875vw; margin-bottom:12.5vw;}
	.read_con table tr th{padding:1.5625vw; font-size:3.125vw;}
	.read_con table tr td{padding:1.5625vw; font-size:2.8125vw;}
	.read_con img{margin:1.5625vw auto;}

	.read_list table{width:100%; display:block;}
	.read_list table tr{display:block; width:100%;}
	.read_list table tr td{display:block; width:100%; line-height:7.8125vw; font-size:2.1875vw;}
	.read_list table tr td img{margin-left:1.5625vw; width:1.40625vw; height:0.9375vw;}
	.read_list table tr th{display:block; width:100%; line-height:7.8125vw; font-size:2.5vw;}
	.read_list a.chart{font-size:2.1875vw; margin-bottom:23.4375vw; margin-top:2.34375vw; width:13.59375vw; height:4.84375vw; line-height:4.84375vw;}

}
@media all and (max-width:460px){
	.portfolio_con .item li a img{width:100%; height:auto}
	.portfolio_con .item li{width:100%; margin:3.2608695652vw 0;}
	.portfolio_con .item li:nth-of-type(4n){margin-right:0;}
	.portfolio_con .item li:nth-of-type(4n){margin-right:0;}
	.portfolio_con .item li:nth-of-type(3n){margin-right:0;}
	.portfolio_con .item li:nth-of-type(2n){margin-right:0;}
}

/* about */
/* 20190322 파일 css */
.about_con{margin-bottom:150px;}
.about_con h3{font-size:26px; color:#fff; letter-spacing:-0.025em; text-align:center;}
.about_con .hr{width:28px; height:2px; background:#fff; margin:40px auto 30px;}
.about_con p{font-size:#c2c2c2; margin-bottom:30px;  font-size:18px; letter-spacing:-0.025em; text-align:center; line-height:1.3;}
.about_con img{max-width:100%;}

@media all and (max-width:640px){
	.about_con{margin-bottom:23.4375vw;}
	.about_con h3{font-size:4.0625vw;}
	.about_con .hr{width:4.375vw;margin:6.25vw auto 4.6875vw;}
	.about_con p{margin-bottom:4.6875vw; font-size:2.8125vw;}
}
/* about new */
.about_con01{font-family:'Noto Sans KR', sans-serif;}
.about_con01 .after:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.about_con01 .left{width:48%; float:left; padding-right:110px; position:relative; box-sizing:border-box;}
.about_con01 .left img{position:absolute; left:0; top:0;}
.about_con01 .left .bg_box{margin-left:115px; width:78%; height:796px; background:rgba(31,31,31,0.6)}
.about_con01 .right{padding-top:130px; width:52%; float:left;}
.about_con01 .right p{word-break:keep-all; font-size:18px; color:#878787; letter-spacing:-0.06em; line-height:1.6; font-weight:200; padding-bottom:40px;}
.about_con01 .right p:first-child{padding-bottom:75px;}
.about_con01 .right p font{font-size:32px; color:#efefef; font-weight:200;}
.about_con01 .right p span{font-size:20px; color:#efefef;}
.about_con01 .right p span b{font-weight:bold;}
.about_con01 .right p span.bot_span{font-size:32px; color:#fff; font-style:italic; font-weight:200; display:block }

@media all and (max-width:1000px){
	.about_con01 .left{width:100%; float:none; padding:0;}
	.about_con01 .right{width:100%; float:none; padding-top:60px;}
	.about_con01 .left .bg_box{height:450px;}
}

@media all and (max-width:640px){
	.about_con01 .left .bg_box{margin-left:17.96875vw; height:70.3125vw;}
	.about_con01 .left img{width:53.59375vw; height:40.78125vw;}
	.about_con01 .right{padding-top:9.375vw;}
	.about_con01 .right p{font-size:2.8125vw;padding-bottom:6.25vw;}
	.about_con01 .right p br{display:none}
	.about_con01 .right p:first-child{padding-bottom:11.71875vw;}
	.about_con01 .right p font{font-size:5vw;}
	.about_con01 .right p span{font-size:3.125vw;}
	.about_con01 .right p span.bot_span{font-size:5vw; }

}



/* contact */
.contact_con{margin-bottom:150px;}
.contact_con .after:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.contact_con .left{width:320px; float:left;}
.contact_con .left .hr{width:28px; height:2px; background:rgba(255,255,255,0.8);}
.contact_con .left ul{margin:0;}
.contact_con .left ul li img{margin-bottom:15px; margin-top:50px;}
.contact_con .left ul li p{font-size:20px; color:#b5b5b5; letter-spacing:-0.05em;}
.contact_con .right{width:calc(100% - 320px); height:440px; float:left;}
.contact_con .right .root_daum_roughmap .wrap_map{height:100%}

@media all and (max-width:767px){
	.contact_con .left{width:100%; float:none; margin-bottom:50px;}
	.contact_con .right{width:100%; height:400px; float:none}
	.contact_con .left .hr{margin:0 auto;}
	.contact_con .left ul li{text-align:center;}
}
@media all and (max-width:640px){
	.contact_con{margin-bottom:23.4375vw;}
	.contact_con .left{margin-bottom:7.8125vw;}
	.contact_con .left .hr{width:4.375vw;}
	.contact_con .left ul li img{width:4.6875vw; height:4.84375vw; margin-bottom:2.34375vw; margin-top:7.8125vw;}
	.contact_con .left ul li p{font-size:3.125vw;}
	.contact_con .right{height:62.5vw; }

}

/* partners */
.partners{margin-bottom:130px;}
.partners .after:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.partners .after ul li{float:left; width:calc(25% - 15px); margin-right:20px; margin-bottom:20px;}
.partners .after ul li:nth-of-type(4n){margin-right:0;}
.partners .after ul li .img_box{display:block; overflow:hidden; border:10px solid #e1e1e1; background:#fff; height:170px; box-sizing:border-box;}
.partners .after ul li .img_box img{width:100%}
.partners .after ul li h2{font-size:24px; color:#fff; letter-spacing:-0.05em; font-weight:bold; padding:15px 0;}

@media all and (max-width:1000px){
	.partners .after ul li{width:calc(33.333333% - 16px); margin-right:21px;}
	.partners .after ul li:nth-of-type(4n){margin-right:21px;}
	.partners .after ul li:nth-of-type(3n){margin-right:0;}
}
@media all and (max-width:767px){
	.partners .after ul li{width:calc(50% - 10px); margin-right:20px;}
	.partners .after ul li:nth-of-type(4n){margin-right:20px;}
	.partners .after ul li:nth-of-type(3n){margin-right:20px;}
	.partners .after ul li:nth-of-type(2n){margin-right:0;}
}
@media all and (max-width:640px){
	.partners{margin-bottom:20.3125vw;}
	.partners .after ul li{width:calc(50% - 10px); margin-right:3.125vw;}
	.partners .after ul li:nth-of-type(4n){margin-right:3.125vw;}
	.partners .after ul li:nth-of-type(3n){margin-right:3.125vw;}
	.partners .after ul li:nth-of-type(2n){margin-right:0;}

	.partners .after ul li .img_box{height:26.5625vw ;border-width:1.5625vw;}
	.partners .after ul li h2{font-size:3.75vw; padding:2.34375vw 0;}
}

/* contact 폼메일*/
.bot_form span{text-align:right; display:block; font-size:14px; font-weight:200; letter-spacing:-0.025em; color:#adadad;}
.bot_form .input_box{width:100%; padding:12px 0;}
.bot_form .input_box:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.bot_form .input_box .text{width:320px; height:60px; font-size:32px; letter-spacing:-0.025em; color:rgba(255,255,255,0.8); display:table; float:left;}
.bot_form .input_box .text p{display:table-cell; width:100%; vertical-align:middle; font-weight:bold;}
.bot_form .input_box .input_after{width:calc(100% - 320px); float:left;}
.bot_form .input_box .input_after input{color:#fff; padding:0 15px; box-sizing:border-box; width:100%; height:60px; background:#232323; border:0; -webkit-appearance: none; -webkit-border-radius: 0;}
.bot_form .input_box .input_after textarea{color:#fff; padding:0 15px; box-sizing:border-box; width:100%; height:265px; background:#232323; border:0; -webkit-appearance: none; -webkit-border-radius: 0;}
.bot_form .submit_btn{text-align:right; padding-top:30px;}
.bot_form .submit_btn a{font-size:32px; color:rgba(255,255,255,0.8); font-weight:bold;}

@media all and (max-width:767px){
	.bot_form .input_box .text{width:100%; height:auto; float:none; padding:5px 0;}
	.bot_form .input_box .input_after{width:100%; float:none;}
}
@media all and (max-width:640px){
	.bot_form span{font-size:2.1875vw; }
	.bot_form .input_box{padding:1.875vw 0;}
	.bot_form .input_box .text{font-size:5vw;}
	.bot_form .input_box .input_after input{height:9.375vw; }
	.bot_form .input_box .input_after textarea{height:41.40625vw; }
	.bot_form .submit_btn{padding-top:4.6875vw;}
	.bot_form .submit_btn a{font-size:5vw;}

}