@charset "utf-8";

/* --------------------------------------------
 * skipnavigation
/* ------------------------------------------ */

.skipmenu{position:absolute;top:0;left:0;z-index:99999999999999;width:100%;height:0}
.skipmenu p,.skipmenu ul,.skipmenu ul li{height:0}
.skipmenu li a{display:block;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;margin-bottom:-1px;margin-left:-1px;font-weight:700;color:#000;text-align:center;white-space:nowrap}
.skipmenu li a:focus {z-index:1000;width:100%;height:auto;padding:10px 0;background:#000;color:#FFF !important}

/* --------------------------------------------
 * °øÅë CSS
/* ------------------------------------------ */

/* ¼û±â±â */

.hidden {font-size: 0 !important;    width: 0 !important;    height: 0 !important;    color: transparent !important;    line-height: 0 !important;position: absolute; left: -1000px;    top: 0;    overflow: hidden;    text-indent: -30000px;padding:0!important}

img { max-width:100%; }

/* --------------------------------------------
 * fullpage °¢ ¼½¼Ç °øÅë CSS
/* ------------------------------------------ */

body { background:#242d3c; }
.section { background-size:cover!important; }
/* .section.content .fp-tableCell { display:block; padding-top:150px; } */

#work { background:url('../image/work_bg.jpg') center top no-repeat; }
#business { background:url('../image/business_bg.jpg') center top no-repeat; }
#contact { background:url('../image/contact_bg.jpg') center top no-repeat; }

.section h2 { text-align:center; font-size:60px; font-weight:500; color:#fff; letter-spacing:0.025em; margin-bottom:110px; }

/* --------------------------------------------
 * header
/* ------------------------------------------ */

#header { position:fixed; top:0; background:rgba(0,0,0,0.35); height:85px; width:100%; z-index:999; }
#header .inner { width:1200px; margin:0 auto; }
#header .inner:after { content:''; display:block; clear:both; }

#header h1 { padding-top:15px; float:left; position:relative; z-index:999; }
#header nav { float:right; }
#header nav .gnb li { float:left; }
#header nav .gnb li a { display:block; color:#fff; font-size:20px; font-weight:500; padding-top:40px; margin-right:60px; }

#header .m_menu { float:right; padding:25px 15px 0; }
#header .m_menu .btn_all_menu { background:none; border:none; outline:0; display:none; position:relative; z-index:999; }
#header .m_menu .btn_all_menu span { width:30px; height:2px; background-color:#FFF; margin:8px 0; transition:0.5s; opacity:1; display:block; }
#header .m_menu .btn_all_menu span.barTop { transform-origin:0 50%; transform:rotate(0deg); }
#header .m_menu .btn_all_menu span.barBot { transform-origin:0 50%; transform:rotate(0deg); }

#header .m_menu .btn_all_menu.on span.barMid { opacity:0; }
#header .m_menu .btn_all_menu.on span.barTop { transform-origin:0 50%; transform:rotate(45deg); width:28px; }
#header .m_menu .btn_all_menu.on span.barBot { transform-origin:0 50%; transform:rotate(-45deg); width:28px; }

#header  .allMenuWrap { width:100%; height:305px; position:fixed; top:0; left:0;  background:rgba(0,0,0,0.5); display:none;  }
#header  .allMenuWrap.open { opacity:1; overflow:visible; transform:translate(0,0);  }
#header  .allMenuWrap .allMenu_inner { width:100%; height:220px; background:rgba(0,0,0,0.35); margin-top:85px; padding-top:20px;  }
#header  .allMenuWrap .allMenu_inner .m_gnb li a { color:#fff; font-size:25px; font-weight:500; padding:10px 25px; display:inline-block; }

@media all and (max-width:768px) { 
	#header .inner { width:100%; }
	#header h1 { padding-top:20px; }
	#header h1 img { width:80%; }
}

/* transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; 
 */
/* --------------------------------------------
 * Main Visual
/* ------------------------------------------ */

#mv { text-align:center; }
#mv .fp-tableCell { padding:0; }
#mv h2 { position: absolute; top: 30%; width: 100%; text-align: center; z-index: 99999; }

.sec1Slide { width: 100%; height: 100%; }
.sec1Slide .swiper-container { width: 100%; height: 100%; }
.sec1Slide .swiper-container .swiper-slide { width:100%!important; }
.sec1Slide .swiper-container .swiper-slide.bg1 { background:url('../image/mv_bg_01.jpg') center top no-repeat; background-size:cover; }
.sec1Slide .swiper-container .swiper-slide.bg2 { background:url('../image/mv_bg_02.jpg') center top no-repeat;  background-size:cover;  }

@media all and (max-width:768px) { 
	#mv h2 { margin-bottom:0; }
	#mv h2 img { width:50%; }
}

@media all and (max-width:468px) { 
	#mv h2 { margin-bottom:0; }
	#mv h2 img { width:70%; }
}

/* --------------------------------------------
 * Works
/* ------------------------------------------ */

.sec2Slide { padding:0 7%; }
.sec2Slide .srollbar_area { overflow:hidden; margin:0 auto; }
.sec2Slide .swiper-scrollbar{width:50%;margin:0 auto;position:relative;bottom:auto;left:auto;height:11px;background:#e8e8e8;margin-top:80px;}
.sec2Slide .swiper-scrollbar-drag {background:#bb0841;  }

.sec2Slide .swiper-container .swiper-slide { text-align: center; font-size: 18px;  overflow:hidden; position:relative; cursor:pointer; }
.sec2Slide .swiper-container .swiper-slide > img { width:100%; }
.sec2Slide .swiper-container .swiper-slide .ci { width:100%; height:100%; background:rgba(0,0,0,0.3); position:absolute; top:0; left:0; text-align:center; -webkit-transition-delay: 0.05s;transition-delay: 0.05s;transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; }
.sec2Slide .swiper-container .swiper-slide .ci img { width:45%; }
.sec2Slide .swiper-container .swiper-slide .ci .work_info { position:absolute; bottom:-100px; left:0; width:100%;  color:#fff; background:rgba(0,0,0,0.8); padding:7px 20px; text-align:left;  -webkit-transition-delay: 0.05s;transition-delay: 0.05s;transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; }
.sec2Slide .swiper-container .swiper-slide .ci .work_info p { font-size:16px; font-weight:500; letter-spacing:-0.025em;  }
.sec2Slide .swiper-container .swiper-slide .ci .work_info span { font-size:13px; letter-spacing:-0.05em; word-break: keep-all; line-height:18px; display:inline-block; padding-top:10px; }
.sec2Slide .swiper-container .swiper-slide:hover .ci { background:rgba(0,0,0,0); }
.sec2Slide .swiper-container .swiper-slide:hover .work_info { bottom:0; }

/* --------------------------------------------
 * Business
/* ------------------------------------------ */

#business h2 { margin-bottom:150px; }
.business_area { text-align:center; width:1500px; margin:0 auto; position:relative; }
.business_area:after { content:''; display:block; clear:both; }
.business_area li { display:inline-block;  position:relative; -webkit-transition-delay: 0.03s;transition-delay: 0.03s; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease;  width:370px; height:370px; transform: rotate(-45deg);  }
.business_area li.design { margin:0 50px; }
.business_area li .box_bg { position:relative; }
.business_area li .box_bg:before { content:''; display:block; width:370px; height:370px; background:#0f2439; -webkit-transition-delay: 0.03s;transition-delay: 0.03s; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease;  }
.business_area li.design .box_bg:before { background:#fff; }
.business_area li.cst .box_bg:before { background:#e4004b; }

.business_area li.show {display:block; position:absolute; width:65px; height:66.5px; background:#0f2439; transform: rotate(-45deg); left:34%; top:30%; opacity:0; z-index:9999999999999; }
.business_area li.show.wh {  background:#fff; left:62.2%; }
.business_area li:hover + .show { opacity:1; transform:rotate(-45deg) scale(1.52); }
.business_area li:hover .box_bg:before { transform:scale(1.1); box-shadow: -1px 15px 7px rgba(0,0,0,0.3); }

.business_area li .txt_b {   position:absolute; top:30%; left:0; text-align:center; width:100%;  }
.business_area li .txt_b .desc { color:#fff; text-align:center; -webkit-transition-delay: 0.03s;transition-delay: 0.03s; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; transform: rotate(45deg); padding-left:35px; }
.business_area li .txt_b .desc span { font-size:20px; font-weight:300;  }
.business_area li .txt_b .desc h3 { font-size:50px; letter-spacing:-0.05em; font-weight:500; }
.business_area li.design .txt_b .desc { color:#0f2439; padding-left:40px; }

.business_area li .txt_b .hover { color:#fff; text-align:center;transform: rotate(45deg); position:absolute; top:-10%; left:0; width:100%; opacity:0; -webkit-transition-delay: 0.03s;transition-delay: 0.03s; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; }
.business_area li .txt_b .hover h3 { font-size:30px; letter-spacing:-0.05em; font-weight:500; margin-bottom:40px; }
.business_area li .txt_b .hover p { font-size:18px; font-weight:300; }
.business_area li.design .txt_b .hover { color:#0f2439;  }
.business_area li:hover .desc { opacity:0;  }
.business_area li:hover .hover { opacity:1;  }

/* --------------------------------------------
 * Contact
/* ------------------------------------------ */

#contact h2 { margin-bottom:50px; margin-top:30px; }

.map_wrap { width:100%; position:relative;  overflow:hidden; margin-bottom:50px; }
.map_wrap .map_img { float:left; background:#000; width:60%; text-align:right; padding:0 50px; }
.map_wrap .map_info { float:left; width:40%; text-align:left; position:relative; padding:65px 40px 0; background:#0079bf; }
.map_wrap .map_info ul {  color:#fff;   }
.map_wrap .map_info ul li { margin-bottom:40px; }
.map_wrap .map_info ul li dt { font-size:18px; font-weight:500; margin-bottom:10px; }
.map_wrap .map_info ul li dd { font-size:16px;  }
.map_wrap .map_info a { display:inline-block; margin-top:5px; }

.footer { font-size:14px; color:#8691a2; text-align:center; font-weight:500; padding:0 0 10px; }


.brochure {  position:fixed; right:20px; bottom:30px; text-align:center;    }
.brochure a { display:block; background:#2465b0; color:#fff; width:85px; height:85px; padding:15px; border-radius:50%; line-height:20px; font-weight:500; font-size:15px; transition: 0.3s ease; -moz-transition: 0.3s ease; -webkit-transition: 0.3s ease; -o-transition: 0.3s ease; }
.brochure a:hover { background:#fff; color:#2465b0; box-shadow: 0 20px 40px rgba(17, 20, 39, 0.15); }
.brochure span
{
    -webkit-animation: bounce 0.8s linear 0s infinite alternate;
    animation: bounce 0.8s linear 0s infinite alternate;
}
@-webkit-keyframes bounce {
	50% {
	-webkit-transform:translateY(0px);
	}
	100% {
	-webkit-transform:translateY(7px);
	}
}
For firefox and others than webkit based browsers
@keyframes bounce {
	50% {
	transform:translateY(0px);
	}
	100% {
	transform:translateY(7px);
	}
}



/* --------------------------------------------
 * ¹Ìµð¾îÄõ¸® ¹ÝÀÀÇü
/* ------------------------------------------ */

@media all and (min-width:1200px) { 
	.business_area { min-height:500px; }
	.map_wrap .map_img img { height:100%; }
}

@media all and (max-width:1280px) { 
	
	.section.content .fp-tableCell { display:table-cell; padding-top:0; }
	#header .inner { padding-left:20px; }
	
	/* business */

	.business_area { width:1200px;  }
	.business_area li { width:310px; height:310px; }
	.business_area li .box_bg:before { width:310px; height:310px; }
	.business_area li .txt_b .desc { padding-left:30px; }
	.business_area li.design .txt_b .desc { padding-left:35px; }
	.business_area li .txt_b .desc h3 { font-size:40px; }
	.business_area li .txt_b .hover { top:-20%; width: 110%; }
	.business_area li .txt_b .hover h3 {  margin-bottom:20px; }
	.business_area li .txt_b .hover p { font-size:16px; }
	.business_area li.cst .txt_b .hover { top: -30%;}

	.business_area li.show {  width: 0;  height: 0; border-top:80px solid #0f2439;  border-left:81px solid transparent; left: 31.1%; top: 22.9%; transform: rotate(45deg) scale(0.8);  }
	.business_area li.show.wh { left:61.4%; top:22.9%; border-top:80px solid #fff; }
	.business_area li:hover + .show { transform: rotate(45deg) scale(1.1); }

	/* .footer { padding:0px 0 50px; } */


}

@media all and (max-width:1199px) { 
	
	#header .inner { width:100%; padding-left:20px; }

	/* business */
	#business { height:auto!important; }
	#business .fp-tableCell { height:auto!important; }
	#business h2 { margin-bottom:100px; }
	.business_area { width:100%; padding: 0 0 100px; }
	.business_area li { width:210px; height:210px; display:block; margin:0 auto; }
	.business_area li.design { margin:0 auto; }
	.business_area li .box_bg:before { width:210px; height:210px; }
	.business_area li .txt_b .desc { padding-left:10px; opacity:0; }
	.business_area li.design .txt_b .desc { padding-left:10px; }
	.business_area li .txt_b .desc span { font-size:16px; }
	.business_area li .txt_b .desc h3 { font-size:30px; }
	.business_area li .txt_b .hover { top:-50%; width: 120%; opacity:1; }
	.business_area li .txt_b .hover h3 { font-size:25px; margin-bottom:20px; }
	.business_area li .txt_b .hover p { font-size:14px; }
	.business_area li.cst .txt_b .hover { top: -30%; left: -5%; }
	.business_area li:hover .box_bg:before { transform: scale(1); box-shadow: -1px 2px 7px rgba(0,0,0,0); }

	.business_area li.show { left: 40.5%; top: 25.2%; display:none; }
	.business_area li.show.wh { left:40.5%; top:58.9%; }
	.business_area li:hover + .show { transform: rotate(-45deg) scale(1); }
}

@media all and (max-width:768px) { 
	
	#header nav { display:none;}
	#header .m_menu .btn_all_menu { display:block; }
	 .section.content .fp-tableCell { display:block; padding-top:150px; } 
	.section h2 { margin-bottom: 70px; }

	/* business */
	#business { height:auto!important; }
	#business .fp-tableCell { height:auto!important; }
	#business h2 { margin-bottom:100px; }
	.business_area { width:100%; padding: 0 0 100px; }
	.business_area li { width:200px; height:200px; display:block; margin:0 auto; }
	.business_area li.design { margin:0 auto; }
	.business_area li .box_bg:before { width:200px; height:200px; }
	.business_area li .txt_b .desc { padding-left:10px; opacity:0; }
	.business_area li.design .txt_b .desc { padding-left:10px; }
	.business_area li .txt_b .desc span { font-size:16px; }
	.business_area li .txt_b .desc h3 { font-size:30px; }
	.business_area li .txt_b .hover { top:-50%; width: 120%; opacity:1; }
	.business_area li .txt_b .hover h3 { font-size:25px; margin-bottom:20px; }
	.business_area li .txt_b .hover p { font-size:13px; }
	.business_area li.cst .txt_b .hover { top: -30%; left: -5%; }
	.business_area li:hover .box_bg:before { transform: scale(1); box-shadow: -1px 2px 7px rgba(0,0,0,0); }

	.business_area li.show { left: 40.5%; top: 25.2%; display:none; }
	.business_area li.show.wh { left:40.5%; top:58.9%; }
	.business_area li:hover + .show { transform: rotate(-45deg) scale(1); }
	
	/* contact */
	#contact { height:auto; }
	#contact .fp-tableCell { height:auto!important; }
	.map_wrap .map_img { float:none; width:80%; margin:0 auto; text-align:center; padding:0 20px; }
	.map_wrap .map_info { float:none; width:90%; padding:20px 25px 0; background:#0079bf; margin:30px auto 0; }
	.map_wrap .map_info ul {  color:#fff;   }
	.map_wrap .map_info ul li { margin-bottom:20px; }
	.map_wrap .map_info ul li dt { font-size:18px; font-weight:500; margin-bottom:10px; }
	.map_wrap .map_info ul li dd { font-size:16px;  }
	.map_wrap .map_info a { display:inline-block; margin-top:5px; }
	.map_wrap .map_info a img { width:70%; }

	.footer { padding:50px 0; }


}


@media all and (max-width:767px) { 
	
	#header .inner { width:100%; }
	#mv h2 { margin-bottom:0; }
	#mv h2 img { width:50%; }
	.section h2 { font-size:45px; }

	#business { height:990px!important; }
	#business .fp-tableCell { height:990px!important; }

	.brochure {  right:10px; bottom:10px; }
	.brochure a { font-size:14px; }

}


@media all and (max-width:480px) { 
	
	#mv h2 { top:40%; }
	#business { height:990px!important; }
	#business .fp-tableCell { height:990px!important; }

	#business .fp-tableCell { padding-top:150px; }
	.map_wrap .map_img { width:100%; }
	#mv h2 img { width:70%; }
	
	.sec2Slide .swiper-container .swiper-slide .ci .work_info { height:100%; bottom:-100%; padding:10px; }
	.sec2Slide .swiper-container .swiper-slide:hover .work_info { bottom:0;  }

}