@charset "utf-8";
@import url('fonts.css');

/* reset */
body{margin: 0;}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd{margin: 0; padding: 0;}
main {display: block;}
a{color: inherit; text-decoration: inherit;}
a img{border: none;}
img {max-width: 100%;}
li{list-style: none;}
address, em, i{font-style: normal;}
table {border-collapse: collapse;}
i.fa {display: inline-block; overflow: hidden; position: relative; vertical-align: middle;}
i.fa span {position: absolute; left: -999px;}

/* common  */
#wrapper{min-width: 320px;}

/* main */
ul.ui-list {margin: 30px; font-size: 20px; text-align: center;}
ul.ui-list li {margin: 5px; position: relative; border: 2px solid #e0e0e0; display: inline-block;}
ul.ui-list li a {display: block; width: 300px; text-align: center; padding: 15px 20px; box-sizing: border-box;}
ul.ui-list li a:hover {color: #4bc1d2; background: #f9f9f9;}

html {height: 100%;}
body {height: 100%; overflow: hidden;}
#wrapper {height: 100%;}
div.section {width:100%; height: 100%; background: #fff; overflow: hidden;}




/* ===== add 191025 ===== */

.relative{position: relative;}
.absolute{position: absolute;}
.overflow-hidden{overflow: hidden;}
.w-screen{width:100vw;}
.w-full{width:100%;}
.max-w-full{max-width:100%;}
.h-screen{height:100vh;}
.h-full{height: 100%;}
.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
.flex{display:-webkit-box;display:-ms-flexbox;display:flex;}
.object-cover{-o-object-fit:cover;object-fit:cover;}
.pin, .pin-y{top:0;bottom:0;}
.pin-x{right:0;left:0;}
.bg-black{background: #000;}

.swiper-container {
	width: 100%;
	height: 170px;
	overflow: hidden;
}

@keyframes consult {
 0% {opacity: 0;}
 100% { opacity: 1;}
}
.swiper-slide.swiper-slide-active p{
	animation: consult .6s .4s both;
}

.main_wrap{max-height:100%; height:100%; padding-top:139px; background: #030721;}
.visual_wrap{position:relative; height:100%;}
.visual_area{
    width:100%;
    height:100%;
}

.visual_area .main_slogan{ 
    font-family: 'NanumSquareRound', sans-serif;
    color: #FFF;
    height: 1050px;
    margin: auto;
    width: 100%;
	  top:28%;
	  text-align: center;
}

.main_slogan .sub_slogan{font-size:23px; color:#86c2f1; font-weight:500;}
.main_slogan .big_txt{
    font-size: 48px;
    color: #ffffff;
    font-weight: 500;
    line-height: 64px;
}
.main_slogan .big_txt span{
	opacity: 0.5;
	font-weight: 300;
    font-family: 'NanumSquareRound', sans-serif;
}

#myVerticalCarousel .main_slogan a.portfolio_view{width:380px; height:58px; 
	background:#17213e; opacity:0.6; display:inline-block; font-size:28px; color:#fff; 
  border:1px solid #17213e; margin-top:30px; line-height:58px; transition: all 0.2s ease-out;
}
#myVerticalCarousel .main_slogan a.portfolio_view:hover {opacity:1;}

.portfolio_view img{margin:17px 0 0 15px;}

.available{max-width:100%; margin:2% 0 0 15%; width:85%; height:15%; text-align:left;}

@keyframes maincon {
  from {opacity: 0;}
  to {opacity: 1;}
}

.available .able_con{
	width:100%; height:15%; background:rgba(0, 0, 0, 0.5); 
	padding:0 20px; height:133px; border-radius:100px 0 0 100px;
	animation: maincon 1s linear both;
}

.available .able_con div dl dt{color:#8face8; font-size:25px; line-height:1; display:inline-block; margin:0 0.2em 0 0; transform:translateY(18%);}
.available .able_con div dl dt span{font-size:17px;}
.available .able_con div dl{display:inline-block; width:100%;}
.available .able_con div dl dd{
	display:inline-block; padding:0.95em; background-color:#1c2661; border-radius:25px; border: 2px solid #fff; 
	box-sizing:border-box; margin:0 1.5%; transform: translateY(-10%);
}
.available .able_con div dl dd a{font-size:1.15em; font-weight:bold;}

.available .able_con dl .port01{border:2px solid rgba(116, 194, 233, 0.5); background-color:#1c2661;}
.available .able_con dl .port01 a{color:#74c2e9;}
.available .able_con dl .port02{border:2px solid rgba(102, 204, 153, 0.5);; background-color:#003e4e;}
.available .able_con dl .port02 a{color:#66cc99;}
.available .able_con dl .port03{border:2px solid rgba(233, 129, 129, 0.5); background-color:#440e21;}
.available .able_con dl .port03 a{color:#e98181;}
.available .able_con dl .port04{border:2px solid rgba(210, 136, 240, 0.5); background-color:#431058;}
.available .able_con dl .port04 a{color:#d288f0;}

.available .able_con dl .profile01{border:2px solid rgba(182, 227, 255, 0.5); background-color:#007bc9;}
.available .able_con dl .profile01 a{color:#b6e3ff;}
.available .able_con dl .profile02{border:2px solid rgba(149, 181, 246, 0.5); background-color:#003399;}
.available .able_con dl .profile02 a{color:#95b5f6;}


.m_design{
   display: inline-block;
   width: 50%;
   transform: translateY(50%);
   margin-left:3%;
}

.m_publishing{
   display:inline-block;
   width: 35%;
   transform: translateY(50%);
}


.ico_scroll {
    left: 50%;
    transform: translateX(0);
    width: 31px;
    height: 48px;
    background: url(../images/ico_ms_scroll.png) no-repeat;
    margin: auto; 
}
.ico_scroll span {animation-name:mouseWheel; animation-duration:1s; animation-iteration-count:infinite; animation-timing-function:linear; transform: rotate(180deg); position: absolute; left: 7px; top: -10px; width:18px; height:8px; background: url('../images/ico_dw_arrow.png') no-repeat;}

@keyframes mouseWheel {
	from {
		transform: translateY(0);
	}
	50%{
		transform: translateY(-6px);
	}
	to {
		transform: translate(0);
	}
}
#bgvid{
	  min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

#vid{
top: -120px;
left: -100%;
width: 300%;
height: 100%;
transform: matrix(1, 0, 0, 1, 0, 0);
display: none;
}

.header_wrap{background:transparent;}
.top_area{width:100%; height:142px; background: #fff; margin-top: -140px;}
.bottom_area{width: 200%; height:10%; background: #fff; bottom:-150px;left:0;margin-left: -50%;}
.bottom_area .inner{max-width:100%; margin: auto; width:80%; padding:0 20%;}



.bg{width:3600px; height:50%; position: absolute;}
.bg.on{background-size:cover!important;}
.img{height:50%; width:3600px;}
.header_bg{width:100%; height:140px; background: #fff; top:0; left:0; z-index: 900;}

.layout3 .main_wrap{padding-top: 0; min-height: 640px;}
.layout3 .top_area{display:none;}
.layout3 .header_bg{display: none;}
.layout3 #vid{top:0;}
.layout3 .bottom_area{background: transparent; bottom:0;}
.layout3 .bottom_area .inner{height:100%;}
.layout3 .bottom_area .bottom_con{width:100%; height:100%; padding-top: 40px;}
.layout3 .bottom_area .bottom_con ul li{float:left; width:33%; text-align:center; font-size:22px; color:#e3e2ff; line-height:100%;}
.layout3 .bottom_area .bottom_con ul li span{color:#86c2f1; font-weight: bold;}

.bottom_con ul li a:hover, a:focus {
	  color: #fff9b9;
    text-decoration: none;
}
.bottom_con ul li a:link, a:active, a:visited {
    text-decoration: none;
    border: 0px;
	  color: #ffffff;
}


@media all and (max-width:1180px) {
    #vid{top:-5%;}
    .main_wrap{padding-top: 60px;}
    .header_bg{height:60px;}
    .top_area{height:60px; margin-top: -60px;}
    .visual_area{position: absolute; top:-2px;}
	  .visual_area #bgvid{height:100%;}
    .bottom_area .inner{height:60px;}
    .layout3 .bottom_area{height:120px;}
    .layout3 .bottom_area{height:100px;}
}


@media (max-width: 640px){
    #vid{top:-5%;}
    .main_wrap{padding-top: 50px;}
    .header_bg{height:50px;}
    .top_area{height:50px; margin-top: -50px;}
	.bg a{display:block; width:100%; height:100%;}
    .layout3 .bottom_area{height: 60px;}
}
    
 



.scrollTop{display:none;}
.header_wrap .header h2.title.main_tit{
	padding-top:78px; height:145px; 
    text-align:center; color:#333366; font-size:20px; font-weight: bold; display:none; background-color:#ffffff;
	border-radius: 0 0 110px 110px;
}
.header_wrap .header h2.title.main_tit span{color:#cc66ff;}
.header_wrap .header h2.title.main_tit.contact{padding-top: 72px;}
.header_wrap .header h2.title.main_tit.main_active{display:block; top:-45px;}

h2.title.contact{padding-top: 72px;}
h2.title.main_active{display:block; top:-45px;}
#myVerticalCarousel {
	height: 100%;
	margin: 0;
}

.scopy{font-size:20px; color:#cc99ff; font-weight:500;}
.contact_copy{font-size:23px; color:#ffffff; font-weight:500;  margin-top:20px;}
.contact_copy span{color:#a5edff; font-weight:500;}

.smain_copy{font-size:35px; color:#ffffff; font-weight:500; text-align:center; line-height:43px;}

.item {}
.cont_wrap {width:1200px; margin:0 auto;}
.item h2.title {width:280px; height:140px; color:#fff; margin:0 auto; padding-top:17%; text-align:center; font-size:20px; font-weight: bold;}
.item h2.title.contact{padding-top: 27px;}
.item h2.title.close{text-indent: -9999px; background: transparent;}

#portpolio {background:linear-gradient(180deg,#1b164e,#1c063e); height:100%;}
#portpolio h3 {font-weight:300; text-align: center; font-family: 'NanumSquareRound', sans-serif; transition: all 1s; margin-bottom:10px;}
#portpolio h3.ani{opacity: 1;}

#portpolio .port_layout{width:100%; height:400px; margin-top:50px;}

#portpolio .web_design{float:left; width:50%;}
#portpolio .web_design h4{float:left; width:57%; color:#ffffff; font-size:25px; font-weight:300; text-align:right; padding-right:2%;}
#portpolio .web_design h4 span{color:#cc66ff;}
#portpolio .web_design ul{padding:7% 0 3% 3%}
#portpolio .web_design ul li{float:left; width:50%; padding:2% 2% 2% 2%; text-align:center; transition: all 0.5s;}
#portpolio .web_design ul li:hover{transform: scale(1.1);}
#portpolio .web_design ul li p{font-size:17px; text-align:center; color:#ffffff;}
#portpolio .web_design ul li p span{color:#cc99ff;}
#portpolio .web_design ul li img{border:1px solid #979fd9; width:85%;}

#portpolio .print_design{float:left; width:50%;}
#portpolio .print_design h4{float:left; width:57%; color:#ffffff; font-size:25px; font-weight:300; text-align:right; padding-right:2%;}
#portpolio .print_design h4 span{color:#cc66ff;}
#portpolio .print_design ul{padding:7% 0 3% 3%;}
#portpolio .print_design ul li{float:left; padding:2% 2% 0 2%; text-align:center; transition: all 0.5s;}
#portpolio .print_design ul li:hover{transform: scale(1.1);}
#portpolio .print_design ul li p{font-size:15px; text-align:center; color:#ffffff;}
#portpolio .print_design ul li p span{color:#cc99ff;}
#portpolio .print_design ul li img{border:1px solid #979fd9; width:85%;}


#portpolio .more {
	font-size:18px; border:1px solid #452b5f; 
	border-radius:10px; width:140px; 
	padding-left:10px;
	transition: 0.2s ease-out; font-weight:400; 
	background-color:#ffffff;
	height:28px;
	color:#663399;
	margin-top:5px; 
	line-height:24px;
}
#portpolio .more span {background: url(../images/view_blit.png) center no-repeat; width:15px; height:15px; display:inline-block; margin-left:1px;}
#portpolio .more:hover {background:#000; color:#fff;}
#portpolio .more:hover span {background: url(../images/view_wblit.png) center no-repeat;}
#portpolio .sign {line-height:56px; font-weight:700;}
#portpolio .sign img {margin-left:20px;}

#business {background:linear-gradient(180deg,#02051e,#0c1243); height:100%;}
#business h3 {font-weight:300; text-align: center; margin-bottom:10px;}
#business ul {text-align: center;}
#business ul li {display:inline-block; width:17%; margin: 0 3% 3% 0;}
#business ul li:nth-child(4n) {margin: 0 0 3% 0;}
#business ul li dl{
	display:block; padding:15px 15px 0; 
	height:300px; 
	border:3px solid #6666cc; 
	border-radius:24px; 
	transition:0.2s ease-out;text-align: center;
	font-size:22px;
	font-weight:700;
	overflow:hidden;
	background-color:#ffffff;
	
}

#business ul li dl img{width: 45px; margin-top: 10px;}

#business ul li dl dt{font-size:16px; color:#333366; margin-top:8px;}
#business ul li dl dd{font-size:13px; font-weight:400; color:#333333; border-bottom:1px solid #b2b2b2; padding: 5px 0 10px 0;}
#business ul li dl dd:last-child{border-bottom:none;}
#business ul li dl .academic_img{margin-top:10px;}

.pc #business ul li dl:hover {padding:20px 10px 0; background-color:#ccccff; box-shadow:0 0 5px 5px rgba(240, 203, 255, 0.4); border:1px solid #fff;}
#business ul li a span {display:none; position:relative;  word-break:keep-all}
.pc #business ul li a:hover span {display:block; font-size:14px; font-weight:400; margin-top:15px;}

#business ul li .profile_stitle{font-size:18px; color:#ffffff; height:26px; font-weight:300;}
#business ul li .profile_stitle span{color:#cc66ff;}
#business ul li .profile_txt{font-size:30px; color:#ccccff; padding:10px 0; font-weight:400;}
#business ul li .profile_txt span{font-size:30px; color:#7f86b7;}

#business ul li .profile_con01 dt{font-size:15px; color:#333366; margin-top:4px;}
#business ul li .profile_con01 dd{
	font-size:14px; font-weight:400; color:#333333; 
	border-bottom:1px solid #b2b2b2; padding-bottom:10px;
	margin-bottom: 5px;
}
#business ul li .profile_con01 img{width: 55px; margin-top:4px;}


#business ul li .profile_con02 dt{
	font-size:15px; font-weight:400; color:#333366; 
	margin-top:4px; border-bottom:1px solid #b2b2b2;
	padding: 7px 0 8px 0;
}
#business ul li .profile_con02 dt:last-child{border-bottom:none;}


#contact {background:linear-gradient(180deg,#171717,#333333); height:100%;}
#contact h3 {font-weight:300; text-align:center; margin-bottom:10px;}
#contact #map{width:100%; height:300px;}
#contact .map {float:left; border:1px solid #000; width:55%; border-radius:24px; min-height:250px; height:250px; overflow: hidden; margin:2.5% 3% 0 8%;}
#contact .message{
	float:left; border:3px solid #999999; border-radius:24px; 
	width:26%; min-height:250px; height:250px; 
	background-color:#fff; margin:2.5% 0 0 0;	
}
#contact .message ul{padding:7% 5% 5% 8%; height:250px; background: url(../images/m_icon.png) 195px 110px no-repeat;}
#contact .message ul .message_txt01{font-size:23px; color:#666666; font-weight:400;}
#contact .message ul .message_txt01 span{color:#cc66ff;}
#contact .message ul .message_txt02{font-size:26px; color:#333333; font-weight:600; padding:7px 0;}
#contact .message ul .message_txt02 span{color:#000000;}
#contact .message ul .message_txt03{font-size:16px; color:#333333; letter-spacing:-1px;}
#contact .message a{width:165px; height:42px; color:#ffffff; display:inline-block; 
	line-height:40px; border-radius:15px; margin:10px 0 0 0; padding:0 0 0 20px; font-size: 18px;
	background:#cc66ff url(../images/massage_blit.png) 130px center no-repeat;
}


#contact .cp{padding:0 6%; margin-top:15px;}
#contact .cp li dt {font-size:24px; color:#cc99ff; font-weight:600;}
#contact .cp li dd {margin-top:5px; font-size:20px; color:#ffffff; box-sizing: border-box;}
#contact .cp li dd.call{font-size:16px; color:#ffcc00;}
#contact .cp li dd.email{ background: url(../images/main/contact_btn_bg.png) 0 0 no-repeat; background-size:100%;}
#contact .cp li dd.tel {font-family:'Noto Sans KR', sans-serif; font-size:26px; font-weight:500;}

#contact .cp li dl{height:100px;}
#contact .cp li dl.contact_txt01{float:left; width:28%; margin-left:4%; border-right:1px solid #5a5a5a;}
#contact .cp li dl.contact_txt02{float:left; width:27%; margin-left:4%; border-right:1px solid #5a5a5a;}
#contact .cp li dl.contact_txt03{float:left; width:31%; margin-left:4%;}

.pc #contact .cp li dd .mail:hover {background:#000; color:#fff;}
.pc #contact .cp li dd .mail:hover span {background: url(../images/main/ico_mail_w.png) center no-repeat;}


.footer {position:absolute; bottom:0; left:0; width:100%; background:#fff; border-top: 1px solid #000;}


.b_logo {width:500px; height:100px;  background-color: aqua;}

.mobile_main {display:none;}

/** end *****************************************/
@media (max-width: 1330px){
.m_design {
    transform: translateY(30%);
	margin-left: 5%;
}
	  
.available .able_con div dl dt {
    width: 100%;
	position: relative;
	font-size: 1.5em;
}

.available .able_con div dl dt span {
    position: absolute;
    left: 120px;
    top: 3px;
}

.available .able_con div dl dd {
    margin: 0 3% 0 0;
    transform: translateY(25%);
}  
  
.m_publishing {
    transform: translateY(30%);
}


}



@media (max-width: 1180px){    
    body{overflow:auto;}
    #myVerticalCarousel{overflow:auto; height:auto;}
    
    .vertical-carousel-indicators{display: none;}
    .header_wrap .header h2.title.main_tit.on{
	    padding-top: 75px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			top: -70px;
	  }
    .header_wrap .header h2.title.main_tit.main_active.contact{padding-top:70px;}
    .header_wrap .header h2.title.main_tit.main_active{padding-top:75px; text-align:center; font-size:18px; font-weight: bold; top:-70px;}
    
    
    .cont_wrap{padding: 120px 60px 0; width:100%;}
    #visual{height:100vh; min-height: 640px;}
    
	
	
	  .visual_area .main_slogan{ 
    font-family: 'NanumSquareRound', sans-serif;
    color: #FFF;
    height: 1050px;
    margin:0 auto;
    width: 100%;
	  top:200px;
	  text-align: center;
		}

		.main_slogan .sub_slogan{font-size:20px; color:#86c2f1; font-weight:500;}
		.main_slogan .big_txt{font-size:45px; color:#ffffff; font-weight:500; line-height:60px;}
		#myVerticalCarousel .main_slogan a.portfolio_view{width:300px; height:40px; 
			background:#17213e; opacity:0.6; display:inline-block; font-size:20px; color:#fff; 
			border:1px solid #17213e; margin-top:30px; line-height:40px;
		}

		.portfolio_view img{width:15px; height:15px; margin:12px 0 0 12px;}

	  .available{max-width:100%; width:80%; height:23%; margin:0 10%; text-align:left; margin-top: 50px;}
	  .available .able_con{width:100%; height:220px; background:rgba(0, 0, 0, 0.5); border-radius:80px 80px 80px 80px;}  
	
	.m_design {
		width: 45%;
		height: 170px;
		transform: translateY(20%);
		margin-left: 5%;
	}
		  
	.available .able_con div dl dt {
		width: 100%;
		position: relative;
		font-size: 1.5em;
		margin: 0 0 0.2em 0;
	}
	
	.available .able_con div dl dt span {
		font-size: 0.7em;
		left: 120px;
		top: 3px;
	}
	
	.available .able_con div dl dd {
		margin: 0 3% 5% 0;
		transform: translateY(25%);
		width: 45%;
		text-align: center;
	}  
	  
	.m_publishing {
		width: 45%;
		height: 170px;
		transform: translateY(20%);
		margin-left:4%;
	}
	
	.available .able_con dl .profile01 {width:90%;}
	
	
    #portpolio{height:auto; padding-bottom: 15%;}
    #portpolio h3{font-size: 22px; padding-top: 5%;}
	  #portpolio .web_design{float:left; width:100%; margin-bottom:30px;}
		#portpolio .web_design h4{float:left; width:55%; color:#ffffff; font-size:25px; font-weight:300; text-align:right; padding-right:2%;}
		#portpolio .web_design h4 span{color:#cc66ff;}
		#portpolio .web_design ul{padding:7% 0 3% 3%}
		#portpolio .web_design ul li{float:left; width:50%; padding:0% 2% 4% 2%; text-align:center;}
		#portpolio .web_design ul li p{font-size:17px; margin-top:5px; text-align:center; color:#ffffff;}
		#portpolio .web_design ul li p span{color:#cc99ff;}
		#portpolio .web_design ul li img{border:1px solid #979fd9; width:75%;}
	
	  #portpolio .print_design{float:left; width:100%;}
		#portpolio .print_design h4{float:left; width:55%; color:#ffffff; font-size:25px; font-weight:300; text-align:right; padding-right:2%;}
		#portpolio .print_design h4 span{color:#cc66ff;}
		#portpolio .print_design ul{padding:7% 0 3% 0;}
		#portpolio .print_design ul li{float:left; width:33%; padding:0% 2% 4% 2%; text-align:center;}
		#portpolio .print_design ul li p{font-size:17px; margin-top:5px; text-align:center; color:#ffffff;}
		#portpolio .print_design ul li p span{color:#cc99ff;}
		#portpolio .print_design ul li img{border:1px solid #979fd9; width:100%;}
	  
	
    #business{height:auto; padding-bottom:40px;}
	  
	  #business ul li {
				display: inline-block;
				width: 34%;
				margin: 0 3% 3% 3%;
    }
	  #business ul li:nth-child(4n) {margin: 0 3% 3% 3%;}
	
	  #business ul li dl{
				display:block; padding:10px 15px 0; 
				height:300px; 
				border-radius:24px; 
				transition:0.2s ease-out;text-align: center;
				font-size:22px;
				font-weight:700;
    }
	
	
	
    #contact{height:100vh; padding-bottom: 30px;}
    #contact .cont_wrap{height:850px; padding-bottom:70px;}
	
	  #contact #map{width:100%; height:300px;}
		#contact .map {border:1px solid #000; width:85%; border-radius:24px; min-height:200px; height:200px; overflow:hidden;}
		#contact .message{
			border:3px solid #999999; border-radius:24px; width:85%; 
			min-height:50px; height:90px; background-color:#fff; margin-left:8%;
			position:relative;
	  }
		#contact .message ul{height:250px; background:url(../images/m_icon.png) 98% 5px no-repeat; background-size: 80px 75px;  padding:0;}
		#contact .message ul .message_txt01{float:left; font-size:18px; width:35%; color:#666666; font-weight:400; margin:15px 0 0 25px;}
		#contact .message ul .message_txt01 span{color:#cc66ff;}
		#contact .message ul .message_txt02{font-size:22px; width:35%; color:#333333; font-weight:600; margin-left:25px;}
		#contact .message ul .message_txt02 span{color:#000000;}
		#contact .message ul .message_txt03{font-size:16px; width:45%; color:#333333; letter-spacing:-1px; position:absolute; top:10px; left:35%;}
	
		#contact .message a{width:165px; height:42px; color:#ffffff; display:inline-block; 
			line-height:40px; border-radius:15px; margin:10px 0 0 0; padding:0 0 0 20px; font-size: 18px;
			background:#cc66ff url(../images/massage_blit.png) 130px center no-repeat;
			position:absolute; top:10px; left:60%;
		}
	  
    #contact .cp li{width:96%; margin-top:65px;}
    #contact .cp li:nth-child(odd){margin-left:2%;}
    #contact .cp li dl{padding-right:3%;}
	
	  #contact .cp li dt {font-size:20px; color:#cc99ff; font-weight:600;}
		#contact .cp li dd {margin-top:5px; font-size:16px; color:#ffffff; box-sizing: border-box;}
		#contact .cp li dd.call{font-size:16px; color:#ffcc00;}
		#contact .cp li dd.tel {font-size:20px; font-weight:400;}

    


  .item h2.title{display: none;}
  .footer {position:absolute;}
	.scrollTop{display:block;}
	.main_scrollTop{display:none;}
}


@media (max-width: 640px){
	.header_wrap .header.main {box-shadow:none; background:none;}
	
  .header_wrap .header h2.title.main_tit.on{}
  .header_wrap .header h2.title.main_tit.main_active.contact{padding-top: 19px;}
  .header_wrap .header h2.title.main_tit.main_active{padding-top:22px; text-align:center; font-size:14px; font-weight: bold; top: 0px;}
	.cont_wrap {width:auto; padding:70px 20px 0;}
	h2.title {width:140px; height:70px; background: url(../images/title_bg.png) 0 0 no-repeat; background-size:140px; font-size:14px; padding-top:20px;}
	
	
	.header_wrap .header .pdfdown {display: none;}

   
	.visual_area .main_slogan {
    font-family: 'NanumSquareRound', sans-serif;
    color: #FFF;
    height: 1050px;
    margin: 0 auto;
    width: 100%;
    top: 80px;
    text-align: center;
  }
	
  .main_slogan .main_info{
	height: 8em;
    margin: 2em 0;
  }

	.main_slogan .sub_slogan {
    font-size: 0.9em;
	line-height: 25px;
    color: #86c2f1;
    font-weight: 500;
	padding: 2% 10% 0;
  }
	
	.main_slogan .big_txt {
    font-size: 1.5em;
    color: #ffffff;
    font-weight: 500;
    line-height: 32px;
    padding: 0 10%;
  }
	
   
	
	#myVerticalCarousel .main_slogan a.portfolio_view {
    width: 250px;
    height: 40px;
    background: #17213e;
    opacity: 0.6;
    display: inline-block;
    font-size: 20px;
    color: #fff;
    border: 1px solid #17213e;
    margin-top:5%;
    line-height:40px;
  }
	
	.available {
    max-width: 100%;
    height: 21%;
    margin-top: 5%;
  }
	
	.available .able_con {
    width: 100%;
    height: 260px;
    background: rgba(0, 0, 0, 0.5);
    border-radius:40px;
		padding: 0;
		margin: 0;
  }
  
  .available .able_con div dl {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
	
   .m_design {
		width: 100%;
		height: 100px;
		transform: translateY(10%);
		margin-left: 0%;
	}
		  
	.available .able_con div dl dt {
		font-size: 0.9em;
		padding-left: 5em;
		text-align: left;
	}
	
	.available .able_con div dl dt span {
		font-size: 1em;
		left: 135px;
		top: 0px;
	}
	
	.available .able_con div dl dd {
		margin: 0;
		transform: translateY(25%);
		width: 40%;
		font-size: 0.8em;
		padding: 0.65em;
		margin-bottom: 1em;
	}  
	  
	.m_publishing {
		width: 100%;
		height: 170px;
		transform: translateY(20%);
		margin-left:0%;
	}
	
	.available .able_con dl .profile01 {width:60%;}
	
	.available .able_con dl .port01{border:1px solid rgba(116, 194, 233, 0.3);}
	.available .able_con dl .port02{border:1px solid rgba(102, 204, 153, 0.3);}
	.available .able_con dl .port03{border:1px solid rgba(233, 129, 129, 0.3);}
	.available .able_con dl .port04{border:1px solid rgba(210, 136, 240, 0.3);}
	
	.available .able_con dl .profile01{border:1px solid rgba(182, 227, 255, 0.3);}
	.available .able_con dl .profile02{border:1px solid rgba(149, 181, 246, 0.3);}
		

 .ico_scroll {
    width: 60px;
    height: 55px;
    background: url(../images/ico_fin_scroll.png) no-repeat;
    margin:5% auto 0;
	transform: translate(15%,75%);
  }
	
	.ico_scroll span {
    left: 15px;
    top: -8px;
  }
	
	.layout3 .bottom_area .bottom_con ul li {
    font-size: 1em;
    line-height: 100%;
  }
	
	.smain_copy {font-size:1.35em; line-height:1.4; padding:2% 5% 3%;}
	
	#portpolio {background:#1f1a55; height:auto;}
	#portpolio h3 {font-family: 'Montserrat', sans-serif; 
		font-size:1em; font-weight:300; letter-spacing:-0.2px; text-align: center;
	  padding-top: 10%;
	}
	
	#portpolio .port_layout {margin-top: 5%; height:auto;}
	
	#portpolio .web_design {margin:6% 0;}
	
	#portpolio .web_design h4 {
		float: left;
		width: 65%;
		color: #ffffff;
		font-size: 1.4em;
		font-weight: 300;
		text-align: right;
		padding-right: 2%;
		line-height: 28px;
    }
	
	#portpolio .more {
		font-size: 0.8em;
		border:1px solid #000;
		border-radius:10px;
		width:25%; 
		text-align: center;
		transition: 0.2s ease-out;
		font-weight:700;
		display: inline-block;
		padding: 0 5px;
		margin-top: 2px;
	}
	#portpolio .more span {display: none;}
	#portpolio .more:hover {background:#000; color:#fff;}
	#portpolio .more:hover span {background: url(../images/view_wsblit.png) center no-repeat;}
	
	#portpolio .web_design ul li{padding: 4% 2% 4% 0;}
	
	#portpolio .web_design ul li img{width:90%; border: 1px solid #979fd9;}
	
	#portpolio .web_design ul li p {font-size:0.8em;}
	
	#portpolio .print_design{margin:6% 0;}
	
	
	#portpolio .print_design h4 {
        float: left;
		width: 65%;
		color: #ffffff;
		font-size: 1.4em;
		font-weight: 300;
		text-align: right;
		padding-right: 2%;
		line-height: 28px;
   }
	
	
	#portpolio .print_design ul li {
    float: left;
    width: 50%;
    padding: 4% 2% 4% 2%;
    text-align: center;
  }
	
	#portpolio .print_design ul li p {font-size:0.75em;}
	
	#portpolio .sign {line-height:30px; font-weight:700; float:none; text-align:center; margin-bottom:20px;}
	#portpolio .sign img {height:30px;}
	#portpolio .sign_area{text-align:center;}

	#business {background:#02061f; padding:100px 3% 50px;}
	#business h3 {font-family: 'Montserrat', sans-serif; 
		font-size:1em; font-weight:300; 
		letter-spacing:-0.2px; text-align:center; 
		padding: 0 5%;
	}
	
	#business ul li {float: left; width: 90%; margin: 0 5% 6%;}
	#business ul li:nth-child(2n) {margin: 0 5% 6%;}
	#business ul li:nth-child(3n) {margin: 0 5% 6%;}
	#business ul li:nth-child(6n) {margin: 0 5%;}
	#business ul li a {display:block; padding:100px 0 0; height:160px; border:1px solid #000; border-radius:24px; transition: 0.2s ease-out; text-align: center; font-size:18px; font-weight:700; overflow:hidden;}
	#business ul li a span {display:none; position:relative; }
	
	#business ul li .profile_stitle {font-size: 1em; height: 1em;}
	#business ul li .profile_txt {font-size: 1.5em; padding:5% 0 5% 0;}
	#business ul li .profile_txt span {font-size: 1em;}
  #business ul li dl {
    display: block;
    padding: 15px;
		width: 100%;
    height: 100%;
    border-radius: 24px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
  }
	
	#business ul li dl dt {font-size: 0.8em; padding:1% 0 3% 0;}
	#business ul li dl dd {
    font-size: 0.7em;
    padding-bottom: 5%;
  }
	#business ul li dl img{width:16%; vertical-align:middle;}
	
	#business ul li .profile_con01 {height: 100%;}
	#business ul li .profile_con01 dt {padding:1% 0 1% 0;}
	#business ul li .profile_con01 img{width:20%; vertical-align:middle;}
	
	
	#contact {background: #333333; height:102vh; padding-top:15px;}
	.contact_copy {font-size:1em;}
	#contact #map {border:1px solid #000; border-radius:24px; 
		height:35%; min-height:240px; margin-top:5px; background: rgba(0, 0, 0, 0.4);
	}
	
	#contact .map {
    width: 90%;
    margin: 6% 5% 0 5%;
		min-height: 100px;
		height: 100px;
  }
	
	#contact .message {
    width: 90%;
    background-color: #fff;
    margin: 3% 5% 0 5%;
    position: relative;
  }
	
	#contact .message ul {
    height: 80px;
  }
	
	#contact .message ul .message_txt01 {
    font-size:0.6em;
    margin: 15px 0 0 16px;
  }
	
	#contact .message ul .message_txt02 {
    font-size: 1em;
    margin-left: 16px;
  }
	
	#contact .message ul .message_txt03 {
    font-size: 0.85em;
    width: 45%;
    color: #333333;
    letter-spacing: -1px;
    position: absolute;
    top: 18px;
    left: 40%;
  }
	
	#contact .message a {
    width:50px;
    height:50px;
    color: #ffffff;
    margin:0;
    padding: 10px;
    font-size: 0.75em;
    top: 15px;
    left: 78%;
		line-height: 1.5;
  }
	
	#contact .cp li {float:left; width:100%; margin:0;}
	#contact .cp li:nth-child(odd) {margin-right:0; margin-left:0;}
	#contact .cp li:first-child {margin-left:0;}
	#contact .cp li dl{border-bottom: 1px solid #5a5a5a;}
	#contact .cp li dl.contact_txt01{width:100%; height:35px; margin-left:0; border-right:none;}
	#contact .cp li dl.contact_txt02{width:100%; height:25px; margin-left:0; border-right:none;}
	#contact .cp li dl.contact_txt03{width:100%; height:25px; margin-left:0; border-bottom:none;}
	#contact .cp li dt {float:left; width:45%; font-size:0.8em; height:20px; padding-top:2%;}
	#contact .cp li dd {font-size:0.8em;}
	#contact .cp li dd.tel {float:left; font-size:0.7em; font-weight:700; width:50%;}
  #contact .cp li dd.call{display:none;}
	#contact .cp li dd.email{display: inline-block; float: left; border: none;}
	
	.footer{height:10%;}
	
}


.footer_wrap a.main_scrollTop{display:block;} 

@media (max-width:1200px){
	.footer_wrap a.main_scrollTop{display:none;} 
}