#wrap{width: 100%;}

.title{font-size: 2rem; color:#000; text-align: center; font-weight: 700; padding:135px 0 50px;}
.title_bar{width: 150px; height: 3px; background: rgba(0,0,0,0.5); margin: 0 auto;}
.subtitle{font-size: 1.2rem; color:#666; text-align: center; padding:30px 0;}
.title, .subtitle{width: 93%; margin: 0 auto;}

/*머릿말 시작*/
#header{width: 100%;  padding-top: 80px;}
#header ul div{margin-left: 10px;}
#header ul div p{line-height: 1.5;}
.header_title, .header_title span{font-size: 2.5rem;}
.header_title span{font-weight: 700;}
.header_subtitle{font-size: 1.3rem; padding: 42px 0 10px;}
.header_title_bar{width: 50px; height: 3px; background: rgba(0,0,0,0.5); margin: 15px 0;}
.ad, .de, .art{width: 768px; height: 300px; margin:0 auto;}
.ad{background: url(../images/laonad.jpg) no-repeat;}
.de{background: url(../images/laondesign.jpg) no-repeat;}
.art{background: url(../images/laonart.jpg) no-repeat;}
/*머릿말 끝*/

/*sub소개 시작*/
.title span{font-weight: 300; display: inline; font-size: 2rem;}
.intro_main{font-size: 1.8rem; font-weight: 300; text-align: center; margin: 30px 0;}
.intro_main span{font-size: 1.8rem; font-weight: 700; display: inline;}
.intro_sub{width: 768px; font-size: 1.1rem; line-height:1.6; text-align: center; margin: 0 auto 60px; letter-spacing: 0;}
/*sub소개 끝*/

/*업무과정 시작*/
#system{width: 100%; overflow: hidden; padding-bottom: 135px; background: #f2f2f2;}
.system{width: 610px; margin: 0 auto; overflow: hidden;}
.sys_title{font-size: 2rem; color:#000; font-weight: 700; padding:120px 0 20px;}
.sys_title span{font-weight: 300; display: inline; font-size: 2rem;}
.sys_subtitle{color:#666; line-height: 1.5; float: left; margin-bottom: 55px; padding-left: 10px; border-left: 3px solid #000; font-size: 1.1rem;}
.process{width: 596px; margin: 0 auto; overflow: hidden; padding-top: 10px;}
.process ul{width: 272px; float: left;}
.process ul li{width: 110px; float: left;}
.process ul li img{width: 110px; transition: all;}
.process ul li img:hover{transform: translateY(-10px); transition-duration: 0.3s;}
.process ul li p{text-align: center; line-height: 1.5;}
.m_process{width: 80%; margin: 0 auto; display: none;}
.step{font-size: 1.8rem; font-weight: 700; margin: 10px 0;}
.sub_step{font-size: 1.1rem;}
.arrow{font-size: 1.5rem; font-weight: 700; padding: 167px 20px 0; float: left;}
.sys_call{width:300px; padding: 15px 0; color:#000; font-size: 1.1rem; border: 1px solid #000; margin: 60px auto 0; letter-spacing: 0;}
.sys_call span{display: inline-block; font-size: 1.5rem; font-weight: 700;}
.sys_call:hover, .sys_call:active{background: #000; color:#fff;}
/*업무과정 끝*/

/*라온디자인 사업분야 시작*/
#de_business{width: 100%; overflow: hidden; padding-bottom: 135px;}
#de_business div{width: 640px; height: 210px; margin: 0 auto;}
#de_business div ul li{width:150px; margin: 0 5px; box-shadow: 3px 3px 10px #ccc; float: left;}
#de_business div ul li p{text-align: center;}
.de_bu_title{background: #fdd000; font-size: 1.5rem; color:#fff; padding: 13px 0;}
.de_bu_subtitle{padding: 15px 0; line-height: 1.5; background: #fff;}
#de_business a{width:220px; margin: 40px auto 0; padding: 15px 0; font-size: 1.3rem; color:#000; border: 1px solid #000; text-align: center;}
#de_business a:hover, #de_business a:active{text-decoration: none; background: #000; color:#fff;}
/*라온디자인 사업분야 끝*/

/*라온애드 보유장비 시작*/
#tool{width: 100%;}
#tool div{width: 700px; margin: 0 auto; overflow: hidden; padding-bottom: 120px;}
#tool ul{overflow:hidden; padding: 30px 0;}
#tool li{width: 220px; margin: 0 6px 40px; float: left;}
#tool li img{width: 220px;}
#tool li p{color:#666; text-align: center; padding-top: 20px;}
/*라온애드 보유장비 끝*/

/*라온아트*/
.art_tit { text-align: center; font-size: 18px; font-weight: 600; padding-bottom: 10px;}
.art_txt { text-align: center; font-size: 15px; line-height: 1.5; padding-bottom: 20px;}
.art_txt.art_last {  padding-bottom: 60px;}

.m_img_box,.img_box{text-align: center;}
.m_img_box img,.img_box img{display: inline-block;;}

@media only screen and (min-width:769px){
	.m_img_box{display: none;}
	.img_box{display: block;}
}
@media only screen and (max-width:768px){
	.m_img_box{display: block;}
	.img_box{display: none;}
	.m_img_box{width: 100%;}
	.m_img_box img{width: 100%;}
}
/*라온아트 초상화종류 시작*/
#kind{width: 100%; overflow: hidden; padding-bottom: 135px;}
#kind .kind{width: 700px; margin: 0 auto;}
#kind .kind a, #kind .m_kind a{box-shadow: 3px 3px 10px #ccc; transition: all;}
#kind .kind a:hover, #kind .kind a:active, #kind .m_kind a:hover, #kind .m_kind a:active{transform: translateX(10px); transition-duration: 0.3s;}
#kind .kind a img, #kind .m_kind a img{margin-bottom: 20px;}
#kind .m_kind{width: 320px; margin: 0 auto; display: none;}

/*라온아트 초상화종류 끝*/

/*라온아트 SNS 시작*/
#sns{width: 100%; background: #f2f2f2; overflow: hidden; padding-bottom: 135px;}
#sns div{width: 600px; margin: 0 auto;}
#sns div a{width: 80px; margin: 20px; float: left; transition: all;}
#sns div a:hover, #sns div a:active{transform: translateY(-10px); transition-duration: 0.3s;}
/*라온아트 SNS 끝*/

/*갤러리 리스트 시작*/
.ga_header_title{color:#fff; text-align: center; padding: 134px 0;}
#ga_list{width: 768px; margin: 35px auto 0; overflow: hidden;}
figure.snip1384 {position: relative; float: left; overflow: hidden; margin:0.4%; width: 249px; color: #ffffff; text-align: left; font-size: 16px; background-color: #000000;}
figure.snip1384 * {-webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease; transition: all 0.35s ease;}
figure.snip1384 img {max-width: 100%; backface-visibility: hidden; vertical-align: top;}
figure.snip1384:after, figure.snip1384 figcaption {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
figure.snip1384:after {content: ''; background-color: rgba(0, 0, 0, 0.65); -webkit-transition: all 0.35s ease; transition: all 0.35s ease; opacity: 0;}
figure.snip1384 figcaption {z-index: 1; padding: 17%;}
figure.snip1384 h3, figure.snip1384 .links {width: 100%; margin: 5px 0; padding: 9% 0 0 0; text-align: center;}
figure.snip1384 h3 {line-height: 1.5; font-weight: 700; font-size: 2rem; text-transform: uppercase; opacity: 0;}
figure.snip1384 p {font-weight: 300; letter-spacing: 1px; opacity: 0; top: 50%; -webkit-transform: translateY(40px); transform: translateY(40px); text-align: center; line-height: 1.5;}
figure.snip1384 i {position: absolute; bottom: 10px; right: 10px; padding: 20px 25px; font-size: 34px; opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px);}
figure.snip1384 a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;}
figure.snip1384:hover img, figure.snip1384.hover img { zoom: 1; filter: alpha(opacity=50); -webkit-opacity: 0.5; opacity: 0.5;}
figure.snip1384:hover:after, figure.snip1384.hover:after {opacity: 1; position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px;}
figure.snip1384:hover h3, figure.snip1384.hover h3, figure.snip1384:hover p, figure.snip1384.hover p, figure.snip1384:hover i, figure.snip1384.hover i {-webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1;}
.ga_text{text-align: center; font-size: 1.3rem;	font-weight: 300; margin: 0 auto; padding:80px 0 0; overflow: hidden; line-height: 1.5;}
.ga_text span{display: inline-block; font-weight: 700; font-size: 1.3rem;}
.ga_btn{font-size:1.3rem; color:#000; border: 1px solid #000; width: 220px; margin: 50px auto 120px; padding: 15px 0;}
.ga_btn:hover, .ga_btn:active{background: #000; color:#fff;}
/*갤러리 리스트 끝*/

/*갤러리 상세페이지 시작*/
#ga_contents div{width: 768px; margin: 0 auto;}
#ga_contents .ga_title{font-size: 2rem; padding: 40px 0 0 0; font-weight: 700;}
#ga_contents .ga_title_bar{width: 100%; height: 1px; background: #ccc; margin:20px 0;}
#ga_contents .ga_subtitle{line-height: 1.5; text-align: justify; color:#666; padding-bottom: 40px; letter-spacing: 0;}
#ga_contents ul{overflow: hidden;}
#ga_contents ul li {width: 32%; float: left; margin-bottom: 2%;}
#ga_contents .ga_subimg{width: 100%;}
.ga_blank{width: 100%; padding:35px 0; overflow: hidden;}
/*갤러리 상세페이지 끝*/











@media only screen and (max-device-width:1024px){
	#header{padding-top: 60px;}
	.process ul li img:hover, #kind .kind a:hover, #kind .m_kind a:hover,#sns div a:hover {transform: none;}
}
@media only screen and (max-device-width:768px) {
	/*머릿말*/
	#header ul{background: none;}
	#header ul div{margin:0; }
	#header ul div p br{display: none;}
	#header ul div p{width: 93%; text-align: center; margin: 10px auto; }
	.ad, .de, .art{width: 95%; margin:0 auto 2%;}


	/*소개*/
	.intro_sub{width: 93%; text-align: justify; font-size: 1rem;}
	.intro_sub br{display: none;}

	/*업무과정*/
	.system{width: 95%;}
	.system .sys_title{line-height: 1.5;}
	.system .sys_subtitle{float: none;}

	/*라온디자인소개*/
	.intro_main{width: 95%; margin:8% auto 6%;}
	.intro_main, .intro_main span{font-size: 1.5rem;}

	/*시공사례*/
	#ga_list{width: 95%;}
	figure.snip1384{width: 48%; margin: 1%;}
	figure.snip1384 figcaption {padding: 20%;}

	/*시공사례 상세페이지*/
	#ga_contents div{width: 95%;}
	#ga_contents .ga_subtitle br{display: none;}
}
@media only screen and (max-device-width:700px) {
	/*라온아트 초상화종류*/
	#kind .kind{display: none;}
	#kind .m_kind{display: block;}
	#kind .m_kind{width: 95%;}
	#kind .m_kind a{width:48%; margin: 1%; height: auto; float: left;}
	#kind .m_kind a img{margin: 0;}
}
@media only screen and (max-device-width:600px) {
	/*업무과정*/
	#system{padding-bottom: 110px;}
	.process{width: 95%; padding-top: 0;}
	.process .arrow{display: none;}
	.process ul {width: 100%; padding-bottom: 30px; margin: 0 auto}
	.process ul li {width: 45%;}
	.process ul li img, .process ul li .step, .process ul li .sub_step{float: left;}
	.process ul li img{width: 50px;}
	.process ul li .step, .process ul li .sub_step{font-size: 1.5rem; margin: 10px 0;}
	.process ul li .step{padding:0 10px;}
	.process ul .arrow{padding: 15px 20px 0 0; display: block; font-weight: 300;}

	/*보유장비*/
	#tool div{width: 95%;}

	/*라온디자인 사업분야*/
	#de_business div{width: 95%; height: 420px;}
	#de_business div ul{width: 100%;}
	#de_business div ul li {width: 48%; margin:1%;}

	/*라온아트 초상화종류*/
	#kind .m_kind{width: 95%;}
	#kind .m_kind a{width:100%; margin: 0 0 3% 0; float: none;}

	/*라온아트 소셜미디어*/
	#sns div{width: 95%;}
	#sns div a{width: 16%; margin:4% 2% 0;}
}
@media only screen and (max-device-width:440px) {
	/*업무과정*/
	.system .sys_title span{display: block;}
	.system .sys_title, .system .sys_title span {font-size: 1.8rem;}
	.process {display: none;}
	.m_process{display: block;}

	/*보유장비*/
	#tool div li{width: 80%; float: none; margin:0 auto 50px;}
	#tool div li img{width: 100%;}

	/*시공사례*/
	figure.snip1384{width: 100%; margin: 2% 0;}
	.ga_text{width: 90%;}
	.ga_text, .ga_text span{font-size: 1.3rem;}

}