@charset "utf-8";
/* CSS Document */

@media screen and (min-width:1680px){
.addText { color:#fff; margin:0 auto; display:block; position:relative; top:115px; width:865px; font-size:37px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;
animation-name:ani1;
animation-duration:6s;
animation-iteration-count:infinite;
animation-direction:normal;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
 }	



.about01 img,
.about02 img,
.about03 img,
.about04 img,
.about05 img,
.project01 img,
.contact img { position:relative; left:50% !important; top:50% !important; margin-top:-541px; margin-left:-811px; }


.addText b { font-weight:500; }	
html, body {
		
	-ms-overflow-style: none;	
}
::-ms-scrollbar {
display:none;
}
::-webkit-scrollbar {
display:none;
}
::-moz-scrollbar {
display:none;
}
}
/*reset*/

* {
	margin:0;
	padding:0;
}
html, body {
	width:100%;
	height:100%;
	font-family:'Noto Sans KR';
	min-width:1280px !important;
}

#wrap {
	width:100%;
	height:100%;
	
}
a {
	text-decoration:none;
	color:inherit;
}
ul,li {
	list-style:none;
}
/*사이드바*/
.siTop { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#30b0b6+0,4783ba+100 */
background: #30b0b6; /* Old browsers */
background: -moz-linear-gradient(left,  #30b0b6 0%, #4783ba 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #30b0b6 0%,#4783ba 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #30b0b6 0%,#4783ba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30b0b6', endColorstr='#4783ba',GradientType=1 ); /* IE6-9 */
width:100%; height:6px;
 }
#sideBar {
	min-height:644px;
	width:300px;
	height:100%;
	background:#fff;
	position:fixed;
	z-index:999;
}
.logo {
	text-align:center;
	margin-top:82px;
}
.navi {
	width:100%;
	margin-top:65px;
}	
.navi li{
	width:100%;	
	text-align:center;
}
.navi li a {
	display:inline-block;
	color:#4c4c4c;
	font-size:16px;
	font-weight:400;
	padding:8px 20px;
}
.navi li a:hover {
	color:#30b0b6;
	font-weight:600;
}
.active {
	color:#30b0b6 !important;
	font-weight:600 !important;
}
.footButton {
	width:100%;
	position:absolute;
	bottom:184px;
}
.footButton li {
	width:100%;
	border-top:2px solid #e7e7e7;
}
.footButton li:last-child {
	border-bottom:2px solid #e7e7e7;
}
.footButton li a{
	text-align:center;
	display:block;
	width:100%;
	height:38px;
	line-height:38px;
	color:#4b4b4b;
	font-size:13px;
}
.footButton li a img {
	vertical-align:-1px;
	margin-right:3px;
}
#sideBar p {
	font-size:12px;
	color:#363636;
	text-align:center;
	width:100%;
	box-sizing:border-box;
	position:absolute;
	bottom:30px;
	font-weight:300;
}
#sideBar p b {
	font-weight:500;
	margin-bottom:3px;
	display:inline-block;
}

/*우측영역*/
nav.slidescroll-nav { 
	display:none !important;
}
.main {
	width:100%;
	height:100% !important;
	min-height:878px;
	padding-left:300px;
	box-sizing:border-box;
}
.box {
	width:100%;
	height:100%;	
	overflow:hidden;
	position:relative;
}
.boxBack { 
	min-width:100%;
	min-height:100%;
	position:absolute;
	z-index:0;
}
/*메인*/
.main1 {
	width:100%;
	height:100%;
	position:relative;
}
video {
	position:fixed;
	top:0; 
	left:0;
	width:100%;
	min-height:100%;
	height:auto;
	z-index:-1;
	background:#000;
}

/*타이핑효과*/
#typewriteText {
	color: #ebebe9;
	font-size: 100px;
	letter-spacing:-6px;
	margin:0 auto;
	vertical-align:middle;
	text-align:left;
	width:910px;
	line-height:115px;
	position:relative;
    top:50%;
	transform:translateY(-50%);
	height:405px;
}
#typewriteText > span > strong {
	font-size:114px;
	font-weight:700;	
}
.blinkingCursor {
	width:15px;
	height:111px;
	display:inline-block;
	background:#30b0b6;
	transition:0.3s all;
	margin-left:9px;
	vertical-align:-14px;
}
.blinkOn { opacity:0; }
.blinkOn1 { transition:0.2s all; opacity:0;}
b {
	font-weight:bolder;
}

/*about*/
.about01 > .boxBack,
.about02 > .boxBack,
.about03 > .boxBack,
.about04 > .boxBack,
.about05 > .boxBack {
	top:0;
	left:0;
}
.pc_title_ive {
	position:absolute;
	left:99px;
	bottom:49px;
}
.aboutNavi { 
	position:absolute;
	right:101px;
	bottom:49px;
	font-size:0;
}
.aboutNavi li {
	display:inline-block;
	margin-left:37px;
}
.aboutNavi li a {
	display:block;
	width:56px;
	height:56px;
	background:#fff;
	border-radius:50%;
	color:#28282a;
	text-align:center;
	line-height:56px;
	font-size:24px;
	font-weight:500;
	transition:0.3s all;
}
.aboutNavi li a:hover {
	background:#ef3340;
	color:#fff;	
}
.aboutNavi_on {
	background:#ef3340 !important;
	color:#fff !important;	
}
.about_contnets_box{
	width:500px;
	position:absolute;
	top:73px;
	right:101px;
}
.about_contnets_box > span {
	color:#e1e1e1;
	font-size:20px;
	font-weight:300;
}
.about_contnets_box > span > b {
	color:#ef3340;
	font-weight:600;
}
.about_contnets_box > p {
	font-size:22px;
	font-weight:500;
	color:#fff;
	margin-top:57px;
	letter-spacing:-1px;
	line-height:35px;
}
.about_contnets_box > p > span{
	font-size:32px;
}
.about_contnets_box > p > span > b {
	font-weight:600;	
}
.about04 > .about_contnets_box > span {
	color:#ef3340;
	font-weight:500;
}
.about04 .areaBox {
	font-size:0;
	margin-top:81px;
}
.about04 .areaBox li {
	display:inline-block;
	width:159px;
	height:260px;
	border:4px solid #525254;
	box-sizing:border-box;
	padding:0 16px;
	vertical-align:top;
}
.about04 .areaBox li:nth-child(2),
.about04 .areaBox li:nth-child(3) {
	margin-left:10px;
}
.about04 .areaBox li > h3 {
	font-size:20px;
	color:#fff;
	font-weight:500;
	letter-spacing:-1px;
	border-bottom:1px solid #fff;
	padding-bottom:6px;
	margin-top:18px;
}
.about04 .areaBox li > p {
	color:#7d7d7d;
	font-size:12px;
	font-weight:500;
	letter-spacing:-1px;
	margin-top:12px;
}
.clients_logo {
	position:absolute;
	right:93px;
	top:109px;
	width:877px;
	height:638px;
	font-size:0;
	line-height:0;
}
.clients_logo li {
	display:inline-block;
	width:25%;
	height:25%;
	text-align:center;
	vertical-align:middle;
}
/*project*/
.project01 > .boxBack,
.project02 > .boxBack,
.project03 > .boxBack,
.project04 > .boxBack,
.project05 > .boxBack,
.project06 > .boxBack {
	bottom:0;
	right:0;
}
.pc_title_project {
	position:absolute;
	left:99px;
	bottom:45px;
}
.projectTitle {
	position:absolute;
	left:101px;
	bottom:509px;
	font-size:21px;
	font-weight:500;
	color:#fff;
}
.projectTitle span {
	display:inline-block;
	width:1px;
	height:22px;
	background:#fff;
	margin:0 10px 0 10px;
	vertical-align:-3px;
}
.projectText {
	position:absolute;
	left:101px;
	bottom:387px;
	color:#fff;
	font-size:17px;
	font-weight:400;
	line-height:25px;
}
.youtubeBtn { 
	display:block;
	width:193px;
	height:51px;
	position:absolute;
	left:101px;
	bottom:262px;
	text-align:center;
	line-height:44px;
	color:#fff;
	font-size:16px;
	font-weight:600;
	border:3px solid #fff;
	box-sizing:border-box;
	transition:0.5s all;
	cursor:pointer;
}
.youtube {
	width:85%;
	height:80%;
	top:10%;
	left:7.5%;
	position:relative;	
	display:none;
	z-index:99;
}
.youtubeBtn:hover {
	background:#fff;
	color:#888888;
}
.project03 >.projectText {
	bottom:412px;
}
.project04 >.projectText {
	bottom:287px;
}
.project05 >.projectText {
	bottom:337px;
}
.project06 >.projectText {
	bottom:362px;
}


/*media*/
.media01 > .boxBack,
.media02 > .boxBack,
.media03 > .boxBack {
	bottom:0;
	right:0;
}
.pc_title_media {
	position:absolute;
	left:99px;
	bottom:49px;
}
.media01,
.media02 {
	border-left:1px solid #e9e9e9;
	box-sizing:border-box;
}

.media_contnets_box{
	width:520px;
	position:absolute;
	top:75px;
	right:100px;
}
.media_contnets_box > span {
	color:#ef3340;
	font-size:22px;
	font-weight:600;
	letter-spacing:-1px;
}
.media_contnets_box > p {
	font-size:22px;
	font-weight:500;
	color:#1c1c1c;
	margin-top:57px;
	letter-spacing:-1px;
	line-height:35px;
}
.media_contnets_box > p > span{
	font-size:22px;
	color:#a5a5a5;
	font-weight:400;
	display:block;
	margin-top:35px;
}
.media_contnets_box > p > b {
	font-weight:600;
	font-size:32px;
}
.media01 .areaBox,
.media02 .areaBox {
	font-size:0;
	margin-top:43px;
}
.media01 .areaBox li,
.media02 .areaBox li {
	display:inline-block;
	width:159px;
	height:260px;
	border:4px solid #ef3340;
	text-align:center;
	vertical-align:top;
	box-sizing:border-box;
}
.media01 .areaBox li:nth-child(2),
.media01 .areaBox li:nth-child(3),
.media02 .areaBox li:nth-child(2),
.media02 .areaBox li:nth-child(3) {
	margin-left:10px;
}
.media01 .areaBox li > h3,
.media02 .areaBox li > h3 {
	margin-top:47px;
}
.media01 .areaBox li > p,
.media02 .areaBox li > p {
	color:#7d7d7d;
	font-size:12px;
	font-weight:500;
	letter-spacing:-1px;
	margin-top:20px;
}
.media_contnets_box > a {
	display:block;
	width:497px;
	height:51px;
	box-sizing:border-box;
	text-align:center;
	line-height:45px;
	border:3px solid #ef3340;
	color:#ef3340;
	background:#fff;
	margin-top:10px;
	font-size:16px;
	font-weight:600;
	transition:0.3s all;
}
.media_contnets_box > a:hover {
	color:#fff;
	background:#ef3340;
}
.media03 p{
	position:absolute;
	left:101px;
	top:138px;
	color:#0a0a0a;
	font-size:17px;
	font-weight:500;
	line-height:25px;
	letter-spacing:0px;
}
.media03 a {
	color:#1b1b1b;
	font-size:16px;
	font-weight:600;
	border:3px solid #1b1b1b;
	width:179px;
	height:51px;
	box-sizing:border-box;
	text-align:center;
	line-height:45px;
	position:absolute;
	top:280px;
	left:101px;
	letter-spacing:-1px;
	transition:0.3s all;
}
.media03 a:hover {
	background:#1b1b1b;	
	color:#fff;
}
.media_process {
	position:absolute;	
	top:374px;
	left:101px;
}
.media_process span{
	font-size:17px;
	color:#1b1b1b;
	font-weight:500;
}
.media_process img {
	margin-top:20px;
}

/*contact*/
.contact {
	background:#121214;
}
.map {
	position:absolute;
	top:0;
	right:0;
	z-index:1;
	height:100%;
}
.map img {
	min-height:100%;	
}
.map a {
	display:block;
	position:absolute;
	right:101px;
	bottom:51px;
	color:#fff;
	width:234px;
	height:79px;
	border:4px solid #fff;
	box-sizing:border-box;
	text-align:center;
	line-height:69px;
	font-size:23px;
	font-weight:600;
	transition:0.3s all;
}
.map a:hover {
	background:#fff;
	color:#121214;
}
.map a span {
	font-family:'HY견고딕';
	font-weight:400;
	display:inline-block;
	padding-left:14px;
}
.pc_title_contact {
	position:absolute;
	left:106px;
	bottom:48px;
}
.contact ul {
	position:absolute;	
	top:16px;
	left:101px;
}
.contact ul > li {
	color:#fff;
	font-size:21px;
	font-weight:500;
	padding:47px 0 55px 0;
	border-bottom:1px solid #fff;
}
.contact ul > li:list-child {
	border-bottom:none;
}
.contact ul > li > span {
	display:block;
	color:#c3c3c3;
	font-size:22px;
	font-weight:600;
	margin-bottom:2px;
	letter-spacing:-1px;
	
}

.addText { color:#fff; margin:0 auto; display:block; position:relative; top:115px; width:865px;  font-size:37px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;
animation-name:ani1;
animation-duration:6s;
animation-iteration-count:1;
animation-direction:normal;
animation-timing-function:ease-in-out;
animation-fill-mode:both; }	
 @keyframes ani1{
         0% { padding-right:865px; opacity:0; }
		 85%{ padding-right:865px; opacity:0; }
		100% { padding-right:0;opacity:1; }
        }
.about01 img,
.about02 img,
.about03 img,
.about04 img,
.about05 img,
.project01 img,
.contact img { position:relative; top:50% !important; margin-top:-541px; }
@media screen and (max-width:1680px){

	
	/*타이핑효과*/
#typewriteText {
	color: #ebebe9;
	font-size: 90px;
	letter-spacing:-6px;
	margin:0 auto;
	vertical-align:middle;
	text-align:left;
	width:800px;
	line-height:115px;
	position:relative;
    top:50%;
	transform:translateY(-50%);
	height:405px;
}
#typewriteText > span > strong {
	font-size:94px;
	font-weight:700;	
}
.blinkingCursor {
	height:90px;
	vertical-align:-11px;
}


/*about*/
.aboutNavi {
	bottom:220;
}

.about_contnets_box{
	top:40px;
}

.about_contnets_box > p {
	margin-top:30px;
}

.about04 .areaBox {
	font-size:0;
	margin-top:50px;
}
.clients_logo {
	width:780px;
	height:500px;
}
.media_contnets_box{
	top:40px;
}

.media_contnets_box > p {
	margin-top:30px;
	
}
.map {
	left:560px;
}
.media01 > .boxBack, .media02 > .boxBack, .media03 > .boxBack {
	right:-100px;
}
.project01 > .boxBack, .project02 > .boxBack, .project03 > .boxBack, .project04 > .boxBack, .project05 > .boxBack, .project06 > .boxBack {
	right:-100px;
}
}
@media screen and (max-width:1560px){
	.media01 > .boxBack, .media02 > .boxBack, .media03 > .boxBack {
	right:-130px;
}
.project01 > .boxBack, .project02 > .boxBack, .project03 > .boxBack, .project04 > .boxBack, .project05 > .boxBack, .project06 > .boxBack {
	right:-130px;
}
}
@media screen and (max-width:1400px){
}