@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* main fullpage  --------------------------------------------- */

.section{
    position: relative;
    text-align:center;
    background-size: cover;
    
}

#section0{
    background-image: url(imgs/about1.jpg);
	background-position: center center;
}

#section1{
    /*background:#f4f4f4;*/
	 background-image: url(imgs/section1.jpg);
}

#section2{
	background-image: url(imgs/section2.jpg);
}

#section3{
	 background:#f7f7f7;
}

#section4{
    background-image: url(imgs/about3.jpg);
}

#section5{
    background:#f7f7f7;
}

#section6{

    background-image: url(imgs/work.jpg);
}

#section7{
    /*background:#f7f7f7;*/
	background-image: url(imgs/meeting.jpg);
}

#section8{
	background-image: url(imgs/section8.jpg);
	background-position-y: inherit;
}

#section9{
    background-image: url(imgs/visual3.jpg);
}

#section10{
    background-image: url(imgs/visual1.jpg);
}

#section11{
    background-image: url(imgs/visual2.jpg);
}

#section12{
    background-image: url(imgs/visual3.jpg);
}

#section13{
    background-image: url(imgs/visual4.jpg);
}

#section14{
    background-image: url(imgs/visual5.jpg);
}

/* nav, menu  --------------------------------------- */

.logo {
    float:left;
	padding: 4px 0px;
	width: 150px;
}

.logo img {width:100%;}


nav { 
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
	transition: background-color 0.4s ease-out;
}

.navscroll {
  background-color: #A1572F;
  color: #eef;
}

.nav_pc {
    display: block;
    overflow: hidden;
    padding: 28px 0px 13px 0px;
    margin: 0 65px;
}

.menu-button {
	display: block;
    float: right;
	position: relative;
    top: 5px;
}

.menu-button img{
	width:30px;
}

.submenu {
	text-align: center;
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.submenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
		
.submenu li {
	align-items: center;
    flex: 1;
    line-height: 8vw;
    font-weight: 600;
	}
	
.submenu li a {
	font-size: 4.5em;
	transition: all 0.5s ease;
	display: block;
	text-decoration: none;
	margin: 10px 0px;
}

.submenu li a:hover {
	color: rgba(255, 255, 255, .9);
	transform: scale(1.1);}
	
.submenu li a:before {
	visibility: visible;
	transform: scaleX(1);
}
			
.submenu li a:before {
	content: "";
	position: absolute;
	width: 50%;
	height: 2px;
	bottom: 0;
	left: 25%;
	background: white;
	visibility: hidden;
	transform: scaleX(0);
	transition: all 0.3s ease-in-out 0s;
}

.navigation {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	
	background: rgba(146,172,206,1);
background: -moz-linear-gradient(-45deg, rgba(146,172,206,1) 0%, rgba(94,132,181,0.87) 51%, rgba(86,140,210,0.75) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(146,172,206,1)), color-stop(51%, rgba(94,132,181,0.87)), color-stop(100%, rgba(86,140,210,0.75)));
background: -webkit-linear-gradient(-45deg, rgba(146,172,206,1) 0%, rgba(94,132,181,0.87) 51%, rgba(86,140,210,0.75) 100%);
background: -o-linear-gradient(-45deg, rgba(146,172,206,1) 0%, rgba(94,132,181,0.87) 51%, rgba(86,140,210,0.75) 100%);
background: -ms-linear-gradient(-45deg, rgba(146,172,206,1) 0%, rgba(94,132,181,0.87) 51%, rgba(86,140,210,0.75) 100%);
background: linear-gradient(135deg, rgba(146,172,206,1) 0%, rgba(94,132,181,0.87) 51%, rgba(86,140,210,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92acce', endColorstr='#568cd2', GradientType=1 );
	
	
	/*background: #7e9eca;*/
	opacity: 0;
	visibility: hidden;
	transition: all .5s ease;
	z-index:30;
}

.open {
	opacity: 1;
	visibility: visible;
}

/* body  --------------------------------------------- */

body { font-family: 'Noto Sans KR', sans-serif; }

.visual {
	position: relative;
    margin: 0px 15px;
    height: 100%;
    text-align: center;
}

.maintitle {
	position: relative;
    top: 42%;
}

.maintitle h1{
    font-size: 3em;
    letter-spacing: -3px;
    color: #fff;
    margin-bottom: 2px;
	-webkit-font-smoothing: subpixel-antialiased;
}


.maintitle h3{
    font-size: 1.8em;
    font-weight: 100;
    letter-spacing: -1px;
    color: #fff;
	-webkit-font-smoothing: subpixel-antialiased;
}

.rotatetext {
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	position: absolute;
	left: 0;
	bottom: 32px;
	text-align: center;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);    
	transform:rotate(-90deg);
}

.number {
	color: #fff;
    font-size: 1.6em;
    font-weight: 600;
    position: absolute;
    right: 56px;
    bottom: 62px;
    text-align: right;
}

.numberline {
	height: 3px;
    background: #fff;
    width: 113px;
    position: absolute;
    bottom: -9px;
    right: 1px;
	
}
/* footer  --------------------------------------------- */

.footer {
	width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: 200px;
    padding: 50px 0px;
    text-align: left;
    font-size: 0.9em;
}

.foot-text {
	float: left;
}

.foot-logo {
	margin: 30px 0px 30px 0px;
    float: right;
}

.footer ul li {
	display: inline;
	margin-right: 15px;
	color: #4c4c4c;
	
}

.footer ul li a{
	color: #4c4c4c;
}

.footer p{
	color: #8c8c8c;
    text-align: left;
    font-weight: 200;
	margin:6px 0px;
}

.footline {
	width: 1px;
    background: #9e9e9e;
    height: 14px;
    position: absolute;
    margin: 0px 8px;
    margin-top: 6px;
}

/* main ** media query  --------------------------------------------- */

@media (max-width:786px){
	.nav_pc { 
		margin: 0 15px; 
		padding: 13px 0px 13px 0px;
	}
	
	.number {
		right: 0px;
	}
	
	.maintitle {
    	top: 37%;
	}
	
	.maintitle h1 {
    font-size: 1.6em;
	}
	
	.rotatetext {
		display:none;
	}
	
	.maintitle h3 {
		 font-size: 1.1em;
		 padding: 0px 26px;
	}
	
	.submenu li {
    	line-height: 13vw;
	}
	
	.submenu li a {
    	font-size: 2.5em;
	}
	
	.foot-logo { display:none;}
	
	.footer {
   		padding: 20px;
		height: 160px;
	}
	
	.footer ul li{
		font-size: 0.9em;
	}
	
	.footer p{
		font-size: 1em;
	}
	
	#fp-nav.fp-right {
	    right: 10px;!important
	}
	#fp-nav {
		top: 0px;
    	bottom: 122px;!important
	}
}

@media (max-width:980px){
	.footer {
		max-width: 800px;
		margin: 0 auto;
	}
}

/* mouse  --------------------------------------------- */

#mouse {
	position: absolute;
    z-index: 5;
    text-align: center;
    width: 100%;
    bottom: 35px;
}

.mouse_body {
    border-style: solid;
    border-width: 2px;
    border-color: #fff;
    border-radius: 32px;
    height: 43px;
    width: 23px;
    margin: 0 auto;
}

.mouse_wheel {
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  border-radius: 8px;
  background-color: #fff;
  /* position property required to play animation  */
  position: relative; 
  height: 3px;
  width: 3px;
  /* to center wheel in mouse body */
  margin: 0 auto; 
  animation: wheel_animation 1.5s linear infinite;
}

#mouse h5 {
  color: white;
  text-align: center;
  margin-top: 4px;
}

/* include use -moz-, -webkit-, or -o- for respective browser type*/
@keyframes wheel_animation { 
  0% {
    opacity: 0;
    top: 2px;
  }
  50% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 33px;
  }
}

/* about  --------------------------------------------- */


.about {
    position: relative;
    max-width: 1150px;
    margin: 0 auto;
    height: 100%;
    padding: 8% 15px 0px 15px;
}

.abouttop {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
    padding: 10% 15px 0px 15px;
}

.contacttop {
    position: relative;
    margin: 0 auto;
    height: 100%;
    padding: 5% 15px 0px 15px;
}

.abouttitle {
	position: relative;
    top: 76px;
}


.abouttitle h2 {
    font-size: 2.6em;
	font-weight:600;
    letter-spacing: -3px;
    color: #fff;
    margin-bottom: 2px;
	-webkit-font-smoothing: subpixel-antialiased;
}

.abouttitle h4 {
	width: 712px;
	margin: 0 auto;
    font-size: 1.6em;
    font-weight: 100;
    letter-spacing: -1px;
    color: #fff;
	-webkit-font-smoothing: subpixel-antialiased;
}

.abouttext {
	margin-top: 50px;
}

.abouttext dl{
	display: inline-block;
}

.abouttext dd {
	font-size: 1.1em;
    font-weight: 400;
    color: #fff;
    margin: 10px 0px;
}

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #5f88b3c7;
	/*background: rgba(95,135,179,1);*/
	background: rgba(95,135,179,1);
	background: -moz-linear-gradient(-45deg, rgba(95,135,179,1) 0%, rgba(95,135,179,0.8) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(95,135,179,1)), color-stop(100%, rgba(95,135,179,0.8)));
	background: -webkit-linear-gradient(-45deg, rgba(95,135,179,1) 0%, rgba(95,135,179,0.8) 100%);
	background: -o-linear-gradient(-45deg, rgba(95,135,179,1) 0%, rgba(95,135,179,0.8) 100%);
	background: -ms-linear-gradient(-45deg, rgba(95,135,179,1) 0%, rgba(95,135,179,0.8) 100%);
	background: linear-gradient(135deg, rgba(95,135,179,1) 0%, rgba(95,135,179,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f87b3', endColorstr='#5f87b3', GradientType=1 );
    text-align: center;
}

.circleicon {
    position: relative;
    top: 37px;
}

.aboutcircle {
	position: relative;
    top: 36px
}

.subcont {
	position: relative;
	    
}

.title {
	margin-bottom: 40px;
	text-align:left;
}

.titleline {
	height: 2px;
    width: 46px;
    background: #7296bc;
    position: absolute;
    left: -58px;
    top: 11px;
}

.titleline2 {
	height: 2px;
    width: 46px;
    background: #f69b9b;
    position: absolute;
    left: -58px;
    top: 11px;
}

.subcont h4 {
    font-size: 2em;
    font-weight: 300;
    letter-spacing: -2px;
    color: #292929;
	-webkit-font-smoothing: subpixel-antialiased;
}

.content {
	margin-top: 30px;
}

.overview {
    /*background: #fff;*/
	
background: rgba(255,255,255,0.59);
background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.53) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,255,255,0.59)), color-stop(100%, rgba(255,255,255,0.53)));
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.53) 100%);
background: -o-linear-gradient(-45deg, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.53) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.53) 100%);
background: linear-gradient(135deg, rgba(255,255,255,0.59) 0%, rgba(255,255,255,0.53) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    width: 48%;
    padding: 0px 20px;
    overflow: hidden;
    display: inline-block;
    margin: 0px 8px 18px 8px;
    height: 144px;
    box-sizing: border-box;
}

.overview span {
	color: #b3d0e7;
    font-weight: 700;
    display: inline-block;
    margin: 0px 15px;
	font-size: 2em;
    float: left;
}

.overview dd {
	font-size: 1.2em;
    font-weight: 300;
    word-break: keep-all;
    text-align: left;
    line-height: 145px;
}

.aboutskill img{
	width:84%;
}

.skillbox {
	margin-top: 30px;
}

.skilltext {
	padding-bottom: 12px;
    margin: 0px 8%;
    text-align: left;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: 300;
    border-bottom: 1px solid #fff;
}

.skilltext span{
	font-size: 16px;
	font-weight: 500;
	width: 100%;
	display: inline-block;
	padding: 8px 0px;
	color: #fff;
}


.about2 dt {
	width: 35%;
    background: #fff;
    float: left;
    height: 110px;
	
}

.about2 dd{
    background: #8caece;
    padding: 0px 20px;
    color: #fff;
    font-size: 1.2em;
    font-weight: 300;
    float: left;
    height: 110px;
    width: 65%;
    line-height: 110px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.about2 .about2-1 {
	background-image: url(imgs/about2-1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.about2 .about2-2 {
	background-image: url(imgs/about2-2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.about2 .about2-3 {
	background-image: url(imgs/about2-3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.about2 .about2-4 {
	background-image: url(imgs/about2-4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.about4 {
	color:#fff;
	font-size:24px;
	font-weight:300;
	margin-top:30px;
	letter-spacing: -0.5px;
}

.subtext {
	color:#688fb8;
	font-weight: 600;
	
}

.subcont2 {
    position: relative;
    top: 17%;
}

.subcont2 h4 {
    color:#fff;
	font-weight:600;
	font-size:3em;
}
	
.mcfactory {
	font-size:1.4em;
	margin-top:15px;
	color:#fff;
	font-weight:300;
	padding: 0px 170px;
}
	

@media (max-width:786px){
	#mouse { display:none;}
	
	.about {
		position: relative;
		margin: 0px 15px;
		height: 100%;
		padding: 70px 0px;
	}
	
	.abouttitle {
		top: 20%;
	}
	
	.abouttitle2 {
		top: 8%;
	}
	
	.abouttitle h2 {
		font-size: 1.8em;
    	margin-bottom: 10px;
	}
	
	.abouttitle h4 {
		font-size: 1.0em;
    	width: auto;
	}
	
	.circle {
		width: 28vw;
    	height: 28vw;
		margin: 20px;
	}
	
	.aboutcircle {
		display:none;
	}
	
	.subcont h4 {
    	font-size: 1.2em;
	}
	
	.content {
    	margin-top: 0px;
	}
	
	
	.overview {
		padding: 22px 30px;
		overflow: hidden;
		width: 100%;
		padding: 0px 15px;
		margin: 5px 0px;
		height:auto;
	}
	
	.overview dd {
		font-size:0.9em;
		margin: 10px 0px;
		line-height: unset;
	}
	
	.overview span {
    	display:none;
	}

	.about2 dd {
   		font-size: 0.9em;
		font-weight: 300;
		padding: 23px 12px; text-align: center;
		vertical-align: middle;
		margin-bottom: 8px;
		height: 80px;
		line-height: 20px;
		padding: 20px 5px;
	}
	
	.about2 dt {
    	width: 33%;
		height: 80px;
	}
	
	.skilltext {
		font-size: 0.9em;
		margin: 0px;
	}
	
	.circleicon {      
		position: relative;
		top: 26%;
		width: 40%;
	}
	
	.abouttext dd {
    	font-size: 1.0em;
		font-weight: 400;
	}
	
	.abouttext {
		margin-top: 30px;
	}
	
	.skilltext span {
		font-size: 1.0em;
		color: #7599be;
	}
	
	.subcont2 {
		position: relative;
		top: 22%;
	}
	
	.mcfactory {
		font-size:1.0em;
		padding: 0px 10px;
	}
	
	.titleline { display:none;}

}


@media (max-width:890px){
	.overview {
		width: 100%;
	}
}

/*  work  --------------------------------------------- */

.work {
	width:100% !important;
	max-width:none;
}

.worktext {
	font-size:1.2em;
	font-weight:300;
	text-align: left;
}

.workimg {
    margin: 3% 0;
    width: 100%;
}

.consult dl {
	display: inline-block;
    position: relative;
    margin-bottom: 12px;
    width: 100%;
}

.consult dt {
	width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f3f3f3;
    text-align: center;
    float: left;
    margin: 10px;
}

.consult dd {
   	color: #151515;
    font-weight: 300;
    text-align: left;
    font-size: 1.2em;
    width: 90%;
}

.consult dd p{
    position: relative;
    left: 23px;
    top: 9px;
}

.consult .ddbold {
	font-weight:400;
	color: #ec9b9b;
}


.consulting1 {
    position: relative;
    top: 27px;
}

.worktitle {
	position: relative;
    top: 25%;
}

.workdl {
	margin-top: 45px;
}

.workdl dl{
	display: inline-block;
	vertical-align: top;
    margin: 0px 12px;
}

.workdl dd{
	color:#fff;
	font-weight:400;
	margin-top:8px;
}

.work-circle {
	width: 150px;
    height: 150px;
    border-radius: 50%;
background: rgba(180,126,123,1);
background: -moz-linear-gradient(-45deg, rgba(180,126,123,1) 0%, rgba(179,116,113,0.53) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(180,126,123,1)), color-stop(100%, rgba(179,116,113,0.53)));
background: -webkit-linear-gradient(-45deg, rgba(180,126,123,1) 0%, rgba(179,116,113,0.53) 100%);
background: -o-linear-gradient(-45deg, rgba(180,126,123,1) 0%, rgba(179,116,113,0.53) 100%);
background: -ms-linear-gradient(-45deg, rgba(180,126,123,1) 0%, rgba(179,116,113,0.53) 100%);
background: linear-gradient(135deg, rgba(180,126,123,1) 0%, rgba(179,116,113,0.53) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b47e7b', endColorstr='#b37471', GradientType=1 );
    /*background: #b47e7bbf;*/
    text-align: center;
}

.subtext2 {
	color:#f69b9b;
}

@media (max-width:786px){
	
	.worktext {
 	   font-size: 0.9em;
	   padding: 0px 10px;
	}
	
	.workdl {
		margin-top: 23px;
	}
	
	.workdl dd {font-size: 0.9em;}
	
	.consult dt {
		width: 15vw;
		height: 15vw;
		margin:15px 0px 25px 0px;
	}
	
	.consult dd p {
		font-size: 0.7em;
	}
	consult dd {
		font-size: 0.7em;
	}
	
	
	.worktitle h2 {
		font-size: 2em;
		font-weight:600;
		letter-spacing: -3px;
		color: #fff;
		margin-bottom: 2px;
		-webkit-font-smoothing: subpixel-antialiased;
	}
	
	.worktitle {
		position: relative;
		top: 18%;
	}

	.workdl dl{
		margin: 10px;
		
	}
	
	.consulting1 {
    position: relative;
    top: 17px;
    width:42%;}

	
	.work-circle {
		width: 25vw;
		height: 25vw;
	}
	
}


/*  CONTACT  ----------------------------------*/

.animated2:hover {
	-webkit-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	background:#3184dd;
	color:#fff;
		
}

.googlemap {
	width: 70%;
    margin: 0 auto;
    padding-bottom: 20px;
}

.contxt {
	color:#fff;
}

.email_tit {color:#4870d4;}
.content_email {width:100%; margin:0 auto; padding-bottom: 200px;  }

.email_name input {width:50%; height:50px; font-size:18px; margin-bottom:10px; padding-left:1%; border:1px solid #fff; border-radius:10px; background-color:rgba(255, 255, 255, 0.25);}
.email_name input::placeholder {color:#fff;}
.email_name input:focus {outline: none; background-color:rgba(255, 255, 255, 1);}

.email_number input {width:50%; height:50px; font-size:18px; margin-bottom:10px; padding-left:1%; border:1px solid #fff;border-radius:10px; background-color:rgba(255, 255, 255, 0.25);}
.email_number input::placeholder {color:#fff;}
.email_number input:focus {outline: none; background-color:rgba(255, 255, 255, 1);}

.email_comments textarea {width:50%; height:250px; font-family:'Noto Sans KR', sans-serif; font-size:18px; margin-bottom:15px; padding-left:1%; padding-top:10px; border:1px solid #fff; 
							border-radius:10px; background-color:rgba(255, 255, 255, 0.25);}
.email_comments textarea::placeholder {color:#fff;}
.email_comments textarea:focus {outline: none; background-color:rgba(255, 255, 255, 1);}

.email_submit input {width:50%; height:90px; font-size:22px; font-weight:bold; background:#7296bc; color:#fff; border:0; border-radius:10px; background-color:rgba(114, 150, 200, 0.7);}
.email_submit input:hover {background-color:rgba(114, 150, 200, 1);}

.thankyou_message {text-align:center; font-size:18px; color:#fff; margin-top:30px;}


@media (max-width:786px){

	.consultingdd span {
		font-size: 1em;
	}
	
	.consulting-circle {
    width: 20vw;
    height: 20vw;
	margin-right: 8px;
	}
	
	.consult dl {
		margin:5px 0px;
	}
	
	.consultingdd p{
		color: #434343;
	}
	
	.googlemap {
		width: 100%;
    	margin: 0 auto;
	}
	
	.googlemap iframe {
		max-height: 300px;
	}
	
	.email_name input {width:80%;padding-left:5%;}
	.email_number input {width:80%;padding-left:5%;}
	.email_comments textarea {width:80%; height:200px; margin-bottom:5px;padding-left:5%;}
	.email_submit input {width:80%;}
	.thankyou_message {margin-top:15px;}
}



/*  줄바꿈  ----------------------------------*/
.br_pc {}
.br_m {display:none;}

@media (max-width:786px){
	.br_pc {display:none;}
	.br_m {display:inline;}
}