@charset "utf-8";

.portfolio_visual{position:relative;width:100%;height:390px;background:url('../../images/img/portfolio_img01.jpg') no-repeat center; }
.portfolio_visual .portfolio_text{font-size:64px;line-height:300px;text-align:center; font-weight:bold;}

@media screen and ( min-width:1920px ){
	.portfolio_visual{background-size:100%;}
	}

.p_section1{width:1080px; margin:0 auto; margin-top:100px;}
.p_section1 .sec1_box{float:left; margin-bottom:50px; margin-right:85px;width:290px; height:400px; text-align: center;}
@media screen and ( min-width:1201px ){
	.p_section1 > div:nth-child(3n){margin-right:0;}
}
.p_section1 .sec1_box .pc{top:66px; position:relative;}
.p_section1 .sec1_box .tablet{top:46px; position:relative;}
.p_section1 .sec1_box p{font-size:16px; margin-top:30px; letter-spacing: -0.7px;}
.p_section1 .sec1_box button a{color:#fff;}

.p_section1 .pc_box{position:relative; margin:0 auto; background:url('../../images/portfolio/pc.jpg')no-repeat; width:288px; height:247px;}
.p_section1 .pc_box img{position: absolute; top:11px; left:9px;}
.p_section1 .pc_box button{display:none;}
.p_section1 .pc_box:hover button{display:inline-block;position:absolute; 
	background-color:rgba(0,0,05,0.6); width:269px; height:150px; top:11px; left:9px; z-index:999;color:#fff;font-size:30px; line-height:150px; text-align: center;
	transition:all 0.5s ease-in;cursor:pointer;border:none;}
.p_section1 .pm_box{position:relative; margin:0 auto; background:url('../../images/portfolio/pm.jpg')no-repeat; width:315px; height:247px;}
.p_section1 .pm_box img{position: absolute; top:0; left:0;}
.p_section1 .pm_box button{display:none;}
.p_section1 .pm_box:hover button{display:inline-block;position:absolute; 
	background:url('../../images/portfolio/pm2.png')no-repeat; top:0; left:0;width:315px; height:247px; z-index:999;color:#fff;font-size:30px; line-height:100px; text-align: center;
	transition:all 0.5s ease-in;cursor:pointer;border:none;}	

.p_section1 .m_box{position:relative; margin:0 auto; background:url('../../images/portfolio/mobile.jpg')no-repeat; width:153px; height:312px;}
.p_section1 .m_box img{position: absolute; top:38px; left:10px;}.p_section1 .pm_box button{display:none;}
.p_section1 .m_box button{display:none;}
.p_section1 .m_box:hover button{display:inline-block;position:absolute; 
	background-color:rgba(0,0,05,0.6); top:38px; left:10px;width:133px; height:235px; z-index:999;color:#fff;font-size:30px; line-height:100px; text-align: center;
	transition:all 0.5s ease-in;cursor:pointer;border:none;}	

.p_section1 .t_box{position:relative; margin:0 auto; background:url('../../images/portfolio/tablet.jpg')no-repeat; width:184px; height:266px; ;}
.p_section1 .t_box img{position: absolute; top:15px; left:7px;}
.p_section1 .t_box button{display:none;}
.p_section1 .t_box:hover button{display:inline-block;position:absolute; 
	background-color:rgba(0,0,05,0.6); width:171px; height:208px; top:14px; left:7px; z-index:999;color:#fff;font-size:30px; line-height:208px; text-align: center;
	transition:all 0.5s ease-in;cursor:pointer;border:none;}
#container2{border-top:1px solid #ccc;width:100%;}
.p_topbox{position:relative; text-align: center;}
.p_topbox a{color:#666;}
.p_topbox .arrow_l{position:absolute; top:130px; left:0; width:50px; height:50px; line-height:50px;border:1px solid #ccc;font-size:30px;color:#666;line-height: 40px;}
.p_topbox .arrow_r{position:absolute; top:130px; right:0; width:50px; height:50px; line-height:50px;border:1px solid #ccc;font-size:30px;color:#666;line-height: 40px;}
.p_topbox .arrow_l:hover{width:50px; height:50px;background-color:rgba(0,0,0,0.1); cursor:pointer;}
.p_topbox .arrow_r:hover{width:50px; height:50px;background-color:rgba(0,0,0,0.1); cursor:pointer;}
.p_topbox h2{font-size:30px;font-family: 'NanumSquare'; line-height: 34px;}
.p_topbox h2 span.orange{color:#c20000;font-size:32px;font-family: 'NanumSquare';line-height: 34px;}
.p_topbox .p_cont{width:500px; margin:0 auto; font-size: 20px; line-height: 36px;margin-top:80px;text-align: left;}
.text_gray{color:#666; margin-right:30px; text-align: right; width:100px; }
.p_bottombox{width:100%; border:1px solid #d7d7d7; margin:100px 0; padding:10px 0 40px 10px;}
.p_bottombox p.portfolio_img img{margin:8px; border:1px solid #ddd;}
.p_bottombox .service{margin:40px 0; }
.p_bottombox .service ul li{display:inline-block; float:left;}
.p_bottombox .service ul li.m_service {display: flex; align-content: flex-start; width:190px;font-size:24px;padding:0 10px; box-sizing: border-box;}
.p_bottombox .service ul li.line{height:100%;border-right:1px solid #ccc;margin:; }
.p_bottombox .service ul li ul.s_right{width:850px;}
.p_bottombox .service ul li ul.s_right li{font-size:14px;letter-spacing:-1.4px; margin:5px 20px 5px 0; float:left; width:260px;display:block; text-align:left; line-height:22px;}

.p_bottombox .service ul li ul.new{width:100%;  height:200px; flex-wrap:wrap; display:flex; flex-direction: column;}
.p_bottombox .service ul li ul.new li{font-size:14px;line-height:18px;letter-spacing:-1.4px;margin:5px 20px 5px 0;text-indent: -5px; width:260px;display:block; text-align:left; box-sizing: border-box;}


/* 타블렛 */
@media screen and ( min-width:799px ) and ( max-width:1200px ) {
	#container .common_box{width:90%; margin:0 auto;}
	
	.p_section1{width:820px; margin:0 auto; margin-top:100px;}
	.p_section1 .sec1_box{float:left; margin-bottom:50px; margin-right:85px;width:290px; height:400px; text-align: center;}
	.p_section1 > div:nth-child(2n){margin-right:0;}

	#container2{border-top:1px solid #fff;width:100%;}
	.p_topbox .p_cont{margin-top:50px;}
	.p_bottombox{width:100%; border:1px solid #d7d7d7;margin:60px 0; padding:20px 20px 40px 20px;text-align:center;}
	.p_bottombox p.portfolio_img{width:560px;margin:0 auto;}
	.p_bottombox p.portfolio_img img{margin:10px;}
	.p_bottombox p.img_p img{width:45%;}	

	.p_bottombox .service{width:540px; margin:40px auto; }
	.p_bottombox .service ul li{display:block;}
	.p_bottombox .service ul li.m_service {width:80%;height:60px;text-align:left; font-size:24px;font-weight:bold; line-height: 60px;}
	.p_bottombox .service ul li.line{display:none; }
	.p_bottombox .service ul li ul{float:left;}		
	.p_bottombox .service ul li ul.s_right,.p_bottombox .service ul li ul.new{ width:100%; flex-wrap: nowrap;height:auto;}
	.p_bottombox .service ul li ul.s_right li,.p_bottombox .service ul li ul.new li{margin-left:0; float:left; margin-top:12px;width:260px;display:block; text-align:left; line-height:22px; }
	

}

/* 모바일~타블렛 */
@media screen and ( min-width:481px ) and ( max-width:798px ) {
	#container .common_box{width:90%; margin:0 auto;}

	.p_section1{width:620px; margin:0 auto; margin-top:100px;}
	.p_section1 .sec1_box{float:left; margin-bottom:50px; margin-right:20px;width:290px; height:400px; text-align: center;}
	.p_section1 > div:nth-child(2n){margin-right:0;}

	#container2{border-top:1px solid #fff;width:100%;}
	.p_topbox .p_cont{width:460px; margin:0 auto; font-size: 18px; line-height: 30px; margin-top:50px; letter-spacing: -1.0px;}
	.p_bottombox{width:100%; border:1px solid #d7d7d7;margin:60px 0; padding:20px 20px 40px 20px; text-align:center;}
	.p_bottombox p.portfolio_img{width:540px;margin:0 auto;}
	.p_bottombox p.portfolio_img img{margin:10px;}
	.p_bottombox p.img_p img{width:45%;margin:10px;}
	.p_topbox .arrow_l{position:absolute; top:110px; }
	.p_topbox .arrow_r{position:absolute; top:110px; }

	.p_bottombox .service{width:520px; margin:40px auto; }
	.p_bottombox .service ul li{display:block;}
	.p_bottombox .service ul li.m_service {width:100%; height:60px;text-align:left; font-size:22px;font-weight:bold; line-height: 60px;}
	.p_bottombox .service ul li.line{display:none; }
	.p_bottombox .service ul li ul{float:left;}	
	.p_bottombox .service ul li ul.s_right,.p_bottombox .service ul li ul.new{ width:100%; flex-wrap: nowrap;height:auto;}
	.p_bottombox .service ul li ul.s_right li,.p_bottombox .service ul li ul.new li{margin-left:0; width:250px;line-height:22px; }
	

}

/* 모바일 */
@media screen and ( max-width:480px ) {
	.portfolio_visual{height:290px;}
	.portfolio_visual .portfolio_text{font-size:44px;line-height:250px;}

    .p_section1{width:80%; margin:0 auto; margin-top:30px;}
	.p_section1 .sec1_box{float:left; margin-bottom:30px; width:290px; height:400px; text-align: center;}
	
	#container2{border-top:1px solid #fff;width:100%;}
	#container2 .p_section1{width:90%; margin:0 auto; margin-top:50px;}
	#container2 h2{width:75%; margin:0 auto;}
	.p_topbox{position:relative; text-align: center;}
	.p_topbox a{color:#666;}
	.p_topbox .arrow_l{top:0; right:0;width:30px; height:44px; line-height:34px;}
	.p_topbox .arrow_r{top:0; right:0; width:30px; height:44px; line-height:34px;border:1px solid #ccc;font-size:30px;color:#666;}
	.p_topbox .arrow_l:hover{width:30px; height:44px;background-color:rgba(0,0,0,0.1); cursor:pointer;}
	.p_topbox .arrow_r:hover{width:30px; height:44px;background-color:rgba(0,0,0,0.1); cursor:pointer;}
	.p_topbox h2{font-size:18px; line-height: 22px;}
	.p_topbox .p_cont{width:100%; margin:0 auto; font-size: 16px; line-height: 32px;margin-top:30px;text-align:left;}	
	.p_topbox .p_cont p{letter-spacing: -1.8px;}
	.p_topbox .p_cont .text_gray{width:80px;margin-right:10px;}
	.p_bottombox{width:100%; border:1px solid #d7d7d7;margin:60px 0; padding:10px 10px 40px 10px;text-align:center;}
	.p_bottombox p.portfolio_img img{margin:10px;}
	.p_bottombox p.img_p img{width:80%;margin:10px;}
	.p_bottombox p.img_pm img{width:80%;margin:10px;}

	.p_bottombox .service{ width:290px; margin:40px auto; }
	.p_bottombox .service ul li{display:inline-block;}
	.p_bottombox .service ul li.m_service {width:290px;height:30px;text-align:left; font-size:20px;font-weight:bold; line-height: 30px;}
	.p_bottombox .service ul li.line{width:290px; height:10px; border-bottom:1px solid #ddd; border-right:none;margin-bottom:20px;}
	.p_bottombox .service ul li ul.s_right,.p_bottombox .service ul li ul.new{width:250px;flex-wrap: nowrap;height:auto;}
	.p_bottombox .service ul li ul.s_right li,.p_bottombox .service ul li ul.new li{margin-left:0; width:290px; text-align:left; }


}