@charset "utf-8";

/* common */
p{font-weight:300; font-size:15px;}
.inr{width:1200px; margin:0 auto; padding:90px 0;}
.inr02{position:relative; width:85%; margin:0 auto; padding:60px 0;}
.inr03{width:1100px;  margin:0 auto; padding:0;}

/* header */
#header{position:absolute; left:0px; z-index:999; width:100%; box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.2); text-align:center; }
#header h1{position:fixed; left:20px; top:25px; z-index:9;} 
#header h1 > a{display:block; width:125px; height:35px; background:url(../images/common/logo.svg) no-repeat 0 0; background-size:100%; text-indent:100%; overflow:hidden; white-space:nowrap;}
#header.nav-up .btn_open_menu .btn_open_menu__line{background:#222;}
#header.nav-up  h1 > a{width:120px; height:30px;background:url(../images/common/logo_black.svg) no-repeat 0 0; background-size:100%; transition:all 0.3s ease 0s; }
#header nav{}
#header nav.active{}
#header .gnb{padding:28px;}
#header .gnb > li{display:inline-block; margin:0 65px;}
#header .gnb > li > a{font-size:17px; font-weight:300; color:#fff;}
#header .gnb > li > a:active{color:#00a5db;}
#header .gnb > li > a:hover{color:#00a5db;}


/* footer */
#footer{text-align:center; border-top:1px solid #eee;}
#footer .inr{padding:50px 0;}
#footer address{padding:0 0 5px 0; color:#999; font-weight:300;}
#footer p{color:#999; font-size:14px; font-weight:300;}

/* sub visual */
.area_subVisual{height:749px; box-sizing:border-box; padding-top:350px; color:#fff;}
.area_subVisual.sub01{background:url(../images/content/img_sub_visual01.jpg) no-repeat 50% 50%;background-size: cover;}
.area_subVisual.sub02{background:url(../images/content/img_sub_visual02.jpg) no-repeat 50% 50%;background-size: cover;}
.area_subVisual.sub03{background:url(../images/content/img_sub_visual03.jpg) no-repeat 50% 50%;background-size: cover;}
.area_subVisual.sub04{background:url(../images/content/img_sub_visual04.jpg) no-repeat 50% 50%;background-size: cover;}
.area_subVisual .txt{text-align:center; }
.area_subVisual .txt h2{font-size:45px; font-weight:100; line-height: 80px;}
.area_subVisual .txt p{padding:0 10%; font-size:20px; letter-spacing: 8px;}

/* snb tab */
.tab_area{display:block; padding:60px 15px 0; margin:0 auto; width:600px;}
.tab_area.portfolio{display:none;}
.tab_area ul{display:table; width:100%; table-layout:fixed;}
.tab_area ul > li{display:table-cell;}
.tab_area ul > li > a{position:relative; display:block; padding:17px 10px; box-sizing:border-box; border-bottom:1px solid #dcdddf; text-align:center; font-size:18px; font-weight:400; color:#898d92; letter-spacing:-1px;}
.tab_area ul > li > a.on{background:#fff; color:#3e4248; border-color:#00a5db;}
.tab_area ul > li > a.on:after{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:1px; box-sizing:border-box; background:#00a5db;}
.tab_area ul > li > a br{display:none;}

@media all and (max-width:1600px){
	.inr02{width:90%;}
}
@media all and (max-width:1250px){
	.inr{width:1150px;}
	.inr02{width:95%;}
	#header .gnb > li{margin: 0 55px;}
}
@media all and (max-width:1200px){
	.inr03{width:1000px;}	
}
@media all and (max-width:1000px){
	.inr, .inr02{padding: 60px 0;}	
}
@media all and (max-width:1150px){
	.inr{width:95%;}
	.inr03{width:95%;}
}
@media all and (max-width:1024px){
	.title02 p br{display:none;}
	#header .gnb{display:none;}
}
@media all and (max-width:850px){
	#footer .inr{padding:30px 0;}
	#footer address, #footer p{font-size:14px;}
}
@media all and (max-width:850px){
	.area_subVisual .txt h2{font-size:40px;}	
	.tab_area{width:400px;}
}	
@media all and (max-width:767px){
	#header{border-bottom:0;}
	#header h1{position:relative;}	
	.area_subVisual{height:650px; padding-top:300px;}
}
@media all and (max-width:650px){
	.area_subVisual .txt h2{font-size:35px; line-height:60px;}		
}
@media all and (max-width:580px){
	.area_subVisual .txt h2{font-size:30px; line-height:50px;}
	.area_subVisual{height:550px; padding-top:250px;}
	#footer address, #footer p{font-size:13px;}
	.tab_area ul > li > a{font-size:16px;}
}
@media all and (max-width:480px){
	.area_subVisual .txt h2{font-size:25px; line-height:40px;}	
	.area_subVisual{height:450px; padding-top:220px;}
	.area_subVisual .txt p{font-size:18px; letter-spacing:5px;}
	.tab_area{padding:40px 15px 0; width:80%;}
	.tab_area ul > li > a{padding:8px 10px; font-size:15px;}
}
@media all and (max-width:414px){
	.area_subVisual .txt h2{font-size:22px; line-height:30px;}	
	.area_subVisual{height:400px; padding-top:190px;}
	.tab_area ul > li > a{font-size:14px;}

}
@media all and (max-width:375px){
	.area_subVisual .txt h2{font-size:18px; line-height:25px;}	
	.tab_area{width:90%;}
}

@media all and (max-width:325px){
	.tab_area ul > li > a{font-size:13px;}
}