@charset "utf-8";

/*font*/
/*
font-family: 'Nanum Pen Script', cursive;
font-family: 'Gamja Flower', cursive;*/




/*---------------------
        common
---------------------*/

::selection {background:#161a25;color:#fff;}
::-moz-selection {background:#161a25;color:#fff;}

.row {
    max-width: 1500px;
    width:100%;
    margin:0 auto;
    text-align: center;
}
a, a:hover {
    color:#000;
    text-decoration: none;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.parallax-container {
    height: 100%;
    width: 100%;
    position:relative;
}

.btn {
    transition:all .5s ease;
    color:#fff;
    display: inline-block;
    border-radius: 50px;
    border:1px solid #fff;
    font-size:18px;
    font-weight: 100;
    padding:13px 20px 15px;
}
.btn i {
    transition-delay:0s;
    transition-duration:0.3s;
    transition-property: all;
    transition-timing-function: linear;
}
.btn span {
    display:inline-block;
    padding:0 0 0 10px;
}
.btn:hover {
    background:#161a25;
    border:1px solid #161a25;
    color:#fff;
}
.btn:hover i {
    transform: rotate(360deg);
}

.ttl h2 {
    font-weight: 900;
    font-size:50px;
    position:relative;
    text-transform: uppercase;
}
.ttl h2:before {
    content:'';
    position:absolute;
    bottom:-20px;
    left:50%;
    transform: translate(-50%, -50%);
    width:50px;
    height:2px;
    background:#000;
    text-align: center;
}
.ttl p {
    font-size:16px;
    font-weight: 300;
    padding:30px 0 0;
}


.title {
    text-align: right;
    padding-right:10%;
}
.title h2 {
    font-size:40px;
    padding:20px 0 8%;
}
.title p {
    font-size:16px;
    line-height: 30px;
    font-weight: 100;
}


/*---------------------
        header
---------------------*/
header {
    position:fixed;
    z-index: 999;
    border-bottom:1px solid rgba(255,255,255,.2);
    width:100%;
    margin:0 auto;
    text-align: center;
    transition: all .5s ease;
}
header h1 {
    text-align: center;
    margin:10px auto;
    
}
header h1 img {
    width:100%;
    transition: all .5s ease;
    -o-transform:all .5s ease; 
   -moz-transform:all .5s ease;
   -webkit-transform:all .5s ease;
}
header.change {
    background:#000;
    -o-transform:all .5s ease; 
   -moz-transform:all .5s ease;
   -webkit-transform:all .5s ease;
}
header.change h1 img {
    width:100px;
}
header ul {
    max-width:1500px;
    margin:0 auto;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
}

/*search*/
.select {
    position: relative;
    float: left;
    min-width: 80px;
}
select::-ms-expand {
     display: none;
}

.select:after {
    content: '>';
    font: 17px "Consolas", monospace;
    color: #333;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 11px;
    top: 18px;
    padding: 0 0 2px;
    border-bottom: 1px solid #999;
    position: absolute;
    pointer-events: none;
}

.select select {
    text-transform: uppercase;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 320px;
    height: 50px;
    float: right;
    margin: 5px 0px;
    padding: 0px 10px;
    font-size: 16px;
    background:transparent;
    line-height: 1.75;/
    border: 1px solid #cccccc;
    -ms-word-break: normal;
    word-break: normal;
    color:#fff;
    text-shadow: 0px 0px 12px rgba(0,0,0,.5);
}
header li select option {
    color:#000;
}











/*---------------------
        menu
---------------------*/
.change div.burger {
    top:15px;
}

div.screen{
    width:100%;
}



div.burger {
	height: 30px; 
	width: 40px;
	position: absolute;
	top: 30px; 
/*	left: 21px;*/
	cursor: pointer;
    z-index: 999;
}
	div.x,
	div.y,
	div.z {
		position: absolute; margin: auto;
		top: 0px; bottom: 0px;		
		background: #fff;
		border-radius:2px;
		-webkit-transition: all 200ms ease-out;
		   -moz-transition: all 200ms ease-out;
		    -ms-transition: all 200ms ease-out;
		     -o-transition: all 200ms ease-out;
		        transition: all 200ms ease-out;
	}		
	div.x, div.y, div.z { height: 3px; width: 26px; }
	div.y{top: 18px;}
	div.z{top: 37px;}
	div.collapse{
		top: 20px;
		background:#161a25;
		-webkit-transition: all 70ms ease-out;
		   -moz-transition: all 70ms ease-out;
		    -ms-transition: all 70ms ease-out;
		     -o-transition: all 70ms ease-out;
		        transition: all 70ms ease-out;
	}
	 
	
	div.rotate30{
		-ms-transform: rotate(30deg); 
    	-webkit-transform: rotate(30deg); 
	    transform: rotate(30deg);	
		-webkit-transition: all 50ms ease-out;
		   -moz-transition: all 50ms ease-out;
		    -ms-transition: all 50ms ease-out;
		     -o-transition: all 50ms ease-out;
		        transition: all 50ms ease-out;					
	}
	div.rotate150{
		-ms-transform: rotate(150deg); 
    	-webkit-transform: rotate(150deg); 
	    transform: rotate(150deg);	
		-webkit-transition: all 50ms ease-out;
		   -moz-transition: all 50ms ease-out;
		    -ms-transition: all 50ms ease-out;
		     -o-transition: all 50ms ease-out;
		        transition: all 50ms ease-out;					
	}
	
	div.rotate45{
		-ms-transform: rotate(45deg); 
    	-webkit-transform: rotate(45deg); 
	    transform: rotate(45deg);	
		-webkit-transition: all 100ms ease-out;
		   -moz-transition: all 100ms ease-out;
		    -ms-transition: all 100ms ease-out;
		     -o-transition: all 100ms ease-out;
		        transition: all 100ms ease-out;					
	}
	div.rotate135{
		-ms-transform: rotate(135deg); 
    	-webkit-transform: rotate(135deg); 
	    transform: rotate(135deg);	
		-webkit-transition: all 100ms ease-out;
		   -moz-transition: all 100ms ease-out;
		    -ms-transition: all 100ms ease-out;
		     -o-transition: all 100ms ease-out;
		        transition: all 100ms ease-out;					
	}

div.navbar{height:73px;background:#385e97;}

div.circle{	
	border-radius: 50%;
	width: 0px;
	height: 0px; 
	position:absolute;
	top: 35px;
	left: 36px;
	background:#fff;
	opacity:1;
	-webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000);	
}
div.circle.expand{
/*	width:1200px;*/
	width:78%;
	height:1200px;
	top: -560px;
	left: -565px; 	
	-webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000);					
	
}
/*
div.menu {
	height: 568px; 
	width: 320px;
	position: absolute;
	top: 0px; left: 0px;
}
*/

div.menu ul li {
	list-style: none;
	position:absolute;
	top:50px;
	left:230px;
	opacity:0;
	width:320px;
	text-align:center;
	font-size:0px;
	-webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu ul li a {
    text-align: left;
	color:#161a25;
	text-transform:uppercase;
	text-decoration:none;	
	letter-spacing:3px;
    transition:all .5s ease;
    width:0px;
    height:5px;
    background:#161a25;
}
div.menu ul li a:hover {
    width:200px;
    
}

div.menu li.animate{
	font-size:21px;
	opacity:1;
	-webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	   -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	    -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	     -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	        transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
div.menu li.animate:nth-of-type(1){	
	top:120px;
	transition-delay: 0.0s;	
}
div.menu li.animate:nth-of-type(2){
	top:190px;
	transition-delay: 0.03s;	
			
}
div.menu li.animate:nth-of-type(3){
	top:260px;
	transition-delay: 0.06s;		
	
}
div.menu li.animate:nth-of-type(4){
	top:330px;
	transition-delay: 0.09s;		
	
}
div.menu li.animate:nth-of-type(5){
	top:400px;
	transition-delay: 0.12s;		
	
}
div.menu li.animate:nth-of-type(6){
	top:470px;
	transition-delay: 0.15s;	
			
}












/*---------------------
        contents
---------------------*/

/*slider*/
#visual {
}
#visual .row {
    
}
#visual .item {
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size:cover;
    height:100vh;
}
#visual .visual-sl h2 {
    font-size:100px;
    letter-spacing: 20px;
    text-transform: uppercase;
    color:rgba(255,255,255,.8);
    text-shadow: 0px 0px 12px rgba(0,0,0,.5);
    padding-top:20%;
}
#visual .visual-sl p {
    color:rgba(255,255,255,.7);
    font-size:26px;
    padding:20px 0;
}
#visual .textbox {
    position: absolute;
    bottom:2%;
    left:50%;
    transform:translate(-50%, -50%);
    
}
#visual .owl-theme .owl-nav [class*='owl-'] {
    background:rgba(255,255,255,.1);
    border-radius: 0;
    position: absolute;
    bottom:4%;
    width:40px;
    height:40px;
}
#visual .owl-theme .owl-nav [class*='owl-'] span {
    color:#fff;
    font-size:40px;
}

#visual .owl-carousel .owl-nav button.owl-prev {
    right:115px;
}

#visual .owl-carousel .owl-nav button.owl-next {
    right:70px;
}


/*scroll down*/
.scrolldw a {
    position: absolute;
    bottom: 20px;
    left: 70px;;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}
.scrolldw a:hover {opacity: .5;}

#scrolldown a {padding-top: 0;}
#scrolldown a span {
    position: absolute;
    top: -110px;
    left: 50%;
    width: 1px;
    height: 50px;
    background:#fff;
/*    border-bottom: 1px solid #fff;*/
/*
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
*/
    -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;
    box-sizing: border-box;
}
/*
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform:translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform:translate(-20px, 20px);
    opacity: 0;
  }
}
*/
@keyframes sdb05 {
  0% {
    transform:translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform:translate(0, 50px);
    opacity: 0;
  }
}









/*design*/
#design {
    margin:0 auto;
    text-align: center;
}
#design .ttl {
    margin:50px auto;
}
#design .design-cont {
    background: linear-gradient(to left, #161a25, #161a25 70%, #eee 70%);
    color:#fff;
    display:flex;
    align-items: center;
    padding:100px 0;
}
#design .design-cont .title a {
    margin-top:40px;
}
#design .design-cont .title a:hover {
    color:#161a25;
    background:#fff;
}
#design .design-cont img {
    max-width:100%;
}






/*360viewer*/
#viewer {
    background:#000;
    padding:100px 0;
}
#viewer .ttl {
    color:#fff;
    margin:0;
}

#viewer .pager {
    text-align: right;
    color:#fff;
    padding-right:10%;
}
#viewer .pager span {
    display: block;
    margin-bottom: 20px;
}






.basic-slwrap {
    display:flex;
    align-items: center;
    background:#161a25;
}

.basic-slwrap .basic-sl {
    width:50%;
}
.basic-slwrap .basic-sl .item {width:100%;}
.basic-slwrap .owl-theme .owl-nav {display:none;}
.basic-slwrap .owl-theme .owl-nav.disabled + .owl-dots {margin-top:0;}
.basic-slwrap .owl-theme .owl-dots {
    position: absolute;
    bottom:20px;
    left:50%;
}

.basic-slwrap .title {
    color:#fff;
    width:50%;
    padding:30px 10% 30px 5%;
}
.basic-slwrap .title .btn:hover {
    background:#fff;
    color:#161a25;
}


/**/
#performance .ttl {
    margin:50px 0
}
#perfor .title {
    text-align: left;
    padding:30px 5% 30px 10%;
}

#feature {
    background:#ededed;
}
#feature ul {
    display:flex;
    align-items: center;
}


/*tech*/
.technology .ttl {margin:50px auto;}


.parallax-container .title {
    text-align: left;
    color:#fff;
    position:absolute;
    bottom:15%;
}
.parallax-container .title h2,
.tech-right .title h2 {
    font-size:40px;
    color:#fff;
    padding:20px 0 8%;
}
.parallax-container .title p,
.tech-right .title p {
    font-size:16px;
    line-height: 30px;
    font-weight: 100;
}

.tech-right {
    width:100%;
    height:100%;
}
.tech-right .row {
    position: relative;
}
.tech-right .title {
    text-align: right;
    color:#fff;
    position:absolute;
    right:0;
    bottom:-850px
}

/*tech hover*/
.tech-hover {}
.tech-hover {
    display:flex;
    flex-wrap: wrap;
    margin-top:9px;
}
.tech-hover figure {
    width:33.33%;
    position:relative;
    margin-bottom: -5px;
}
.tech-hover figure:last-child {width:66.67%;}
.tech-hover figure img {width:100%;}
.tech-hover figcaption {
    position: absolute;
    top:0;
    left:0;
    background:rgba(22,26,37,.9);
    color:#fff;
    width:100%;
    height:99%;
    text-align: center;
    opacity:0;
    transition:all .5s ease;
}
.tech-hover figcaption:before {
    content:'';
    position: absolute;
    top:10px;
    left:10px;
    border:1px solid #fff;
    width:96%;
    height:96%;
}
.tech-hover figcaption:after {
    content:'';
    position: absolute;
    top:20px;
    left:20px;
    border:1px solid #fff;
    width:93%;
    height:93%;
}

.tech-hover figure:last-child figcaption:before {
    width:98%;
}
.tech-hover figure:last-child figcaption:after {
    width:96%;
}

.tech-hover figcaption .box {
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.tech-hover figure:hover figcaption {
    opacity:1;
}

.tech-hover figcaption .tt {
    font-size:30px;
    margin-bottom: 30px;
    
}
.tech-hover figcaption p {
    font-size:14px;
    padding:0 10%;
}








/*spec*/
#spec {
    background:#fff;
    margin:50px auto;
}
#spec img {
    width:100%;
    padding:5% 0 30px;
}
#spec ul {
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    padding:50px 0;
    
}
#spec ul li {
    width:50%;
    border-left:1px solid #000;
    text-align: left;
    padding:0 0 0 10px;
}

.endbox .btn {
    margin:30px auto 0;
}


/*personal*/
#personal .row {margin:50px auto;}

.effbox {
    background-image: url(../img/design01.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size:cover;
    padding:7% 0 7% 10%;
    position:relative;
    overflow: hidden;
}
.effbox .hover {
    color:#fff;
    width:34%;
    position:relative;
    z-index: 2;
    opacity:0;
    transition:all .5s ease;
}
.effbox:before {
    content:'';
    position: absolute;
    left: -9%;
    top: -65%;
    background:rgba(0,0,0,.5);
    transform: rotate(120deg);
    width: 1000px;
    height: 1000px;
    z-index: 0;
    transition:all .5s ease;
    opacity:0;
}
.effbox:hover:before, 
.effbox:hover .hover {
    opacity:1;
}
.effbox .hover h2 {
    font-size:30px;
    color:#fff;
    padding:0 0 8%;
}
.effbox .hover p {
    font-size:16px;
    line-height: 30px;
    font-weight: 100;
}
.effbox.box2 {
    background-image: url(../img/design02.jpg);
}
.effbox.box2 .hover {
    text-align: right;
    float:right;
    width:45%;
    padding-right:10%;
}
.effbox.box2:before {
    right:-9%;
    left:auto;
    transform: rotate(66deg);
    top:-30%;
    width:1100px;
}
.effbox.box2 .hover .btn {
    margin-top:30px;
}






/*---------------------
        footer
---------------------*/
footer {
    background:#161a25;
    padding:10px 0;
}
footer .row {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
}
footer .text {
    color:#fff;
    font-size:14px;
    width:33%;
    text-align: center;
}
footer .text:first-child {text-align: left;}
footer .text img {
    width:120px;
}
footer ul {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: flex-end;
}
footer ul li {
    padding-left:20px;
}
footer ul li a {
    color:#fff;
    font-size:30px;
}


/*---------------------
        responsive
---------------------*/
@media screen and (max-width: 1199px) {
}



@media screen and (max-width: 768px) {
}