@charset "utf-8";

/* reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0;padding: 0;border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}
ol, ul{list-style: none;}
table{border-collapse: collapse;border-spacing: 0;}
a{color: inherit;text-decoration: none;}

/* common */

.clearfix:after{display: block;clear: both;content: "";}
.ir{display: block;text-indent: -9999px;}
.wrapper{margin: 0 auto;padding: 0 50px;max-width: 1200px;}

body *{
	font-family: 'NanumSquare';
	font-weight: 400;
	box-sizing: border-box;
}

body.m-open{
	overflow: hidden;
}

body.privacy-open{
	overflow: hidden;
}

.wrap{
	position: relative;
	background-color: #fff;
	z-index: 2;
}

.container{
	margin-top: 145px;
}

.title-wrapper{
	padding: 120px 0 40px;
}

.title-wrapper>a{
	display: inline-block;
}

.title-wrapper h2{
	margin-bottom: 20px;
	color: #6a7bff;
	font-size: 36px;
}

.title-wrapper span{
	display: inline-block;
	position: relative;
	padding-right: 55px;
	color: #3e4554;
	font-family: 'NunitoSans';
	font-size: 26px;
	font-weight: 400;
}

.title-wrapper>a>span:after{
	opacity: 0;
	position: absolute;
	right: 10px;
	bottom: 9px;
	width: 41px;
	height: 10px;
	background-image: url(/img/common.png);
	background-position: -5px -82px;
	transition: opacity .3s, right .3s;
	content: "";
}

.title-wrapper>a:hover>span:after{
	opacity: 1;
	right: 0;
}

.swiper-con{
	position: absolute;
	top: 0;
	bottom: 42px;
	margin: auto 0;
	width: 80px;
	height: 80px;
	background-color: #78dec0;
	transition: transform .3s;
	cursor: pointer;
	z-index: 1;
}

.portfolio-wrapper .swiper-container:hover .swiper-con{
	transform: translate(0);
}

.work-wrapper .swiper-con{
	display: none;
}

.swiper-con:after{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 13px;
	height: 22px;
	background-image: url(/img/common.png);
	content: "";
}

.swiper-prev{
	left: 0;
	transform: translateX(-100%);
}

.portfolio-wrapper .swiper-container:hover .swiper-prev.swiper-button-disabled{
	transform: translateX(-100%);
}

.swiper-con.swiper-prev:after{
	background-position: -6px -106px;
}

.swiper-next{
	right: 0;
	transform: translateX(100%);
}

.portfolio-wrapper .swiper-container:hover .swiper-next.swiper-button-disabled{
	transform: translateX(100%);
}

.swiper-con.swiper-next:after{
	background-position: -8px -135px;
}

.item-top{
	background-size: cover;
	background-position: center;
}

.item-top.creative{
	background-image: url(/img/creative_bg.png);
}

.item-top.casestudy{
	background-image: url(/img/casestudy_bg.png);
}

.item-top.contact-hd{
	background-image: url(/img/contact_bg.png);
}

.item-top p{
	line-height: 300px;
	color: #fff;
	font-family: 'NunitoSans';
	font-size: 60px;
	font-weight: 600;
	text-align: center;
}

/* font */

@font-face {
	font-family: 'NanumSquare', sans-serif;
	src: url(/font/NanumSquareL.ttf) format('truetype');
	font-weight: 300;
}

@font-face {
	font-family: 'NanumSquare', sans-serif;
	src: url(/font/NanumSquareR.ttf) format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'NanumSquare', sans-serif;
	src: url(/font/NanumSquareB.ttf) format('truetype');
	font-weight: 700;
}

@font-face {
	font-family: 'NunitoSans';
	src: url(/font/NunitoSans-Regular.ttf) format('truetype');
	font-weight: 400;
}

@font-face {
	font-family: 'NunitoSans';
	src: url(/font/NunitoSans-SemiBold.ttf) format('truetype');
	font-weight: 600;
}

@font-face {
	font-family: 'NunitoSans';
	src: url(/font/NunitoSans-Black.ttf) format('truetype');
	font-weight: 900;
}

/* header */

header{
	position: fixed;
	padding: 63px 0 22px;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 20;
}

header.active{
	padding: 40px 0;
}

header:after{
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 38px;
	background-image: url(/img/hd_shadow.png);
	content: "";
}

.logo{
	float: left;
}

.logo>img{
	display: block;
	height: 30px;
}

.menu{
	float: right;
	margin-top: 30px;
}

header.active .menu{
	margin-top: 0;
}

.menu>li{
	float: left;
}

.menu>li+li{
	margin-left: 60px;
}

.menu>li>a{
	display: block;
	position: relative;
	line-height: 30px;
	color: #333;
	font-family: 'NunitoSans';
	font-size: 18px;
	font-weight: 400;
}

.menu>li.active>a{
	color: #6a7bff;
}

.menu>li>a:hover{
	color: #6a7bff;
}

.menu>li.active>a:after, .menu>li>a:hover:after{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #6a7bff;
	content: "";
}

.m-menu{
	display: none;
}

.hamburger{
	position: absolute;
	top: 50%;
	right: 40px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	z-index: 2;
}

.hamburger:after{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px;
	width: 50px;
	height: 50px;
	content: "";
}

.hamburger>i{
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: #000;
	transition: all .3s;
}

.hamburger>i:nth-of-type(1){
	top: 0;
}

body.m-open .hamburger>i:nth-of-type(1){
	top: 50%;
	margin-top: -1px;
	transform: rotate(45deg);
}

.hamburger>i:nth-of-type(2){
	top: 50%;
	margin-top: -1px;
}

body.m-open .hamburger>i:nth-of-type(2){
	opacity: 0;
}

.hamburger>i:nth-of-type(3){
	top: 100%;
	margin-top: -2px;
}

body.m-open .hamburger>i:nth-of-type(3){
	top: 50%;
	margin-top: -1px;
	transform: rotate(-45deg);
}

.m-menu-bg{
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	transition: visibility .3s 0s, opacity .3s;
}

body.m-open .m-menu-bg{
	visibility: visible;
	opacity: 1;
}

.m-menu-inner{
	overflow-y: auto;
	position: fixed;
	top: 0;
	right: -70%;
	bottom: 0;
	width: 70%;
	background-color: #fff;
	transition: right .3s;
	z-index: 1;
}

body.m-open .m-menu-inner{
	right: 0;
}

.category{
	margin-top: 140px;
}

.category>li+li{
	margin-top: 70px;
}

.category>li>a{
	display: inline-block;
	padding-bottom: 15px;
	color: #333;
	font-family: 'NunitoSans';
	font-size: 40px;
	font-weight: 400;
}

.category>li.active>a{
	border-bottom: 2px solid #6a7bff;
	color: #6a7bff;
}

.menu-copy{
	margin: 220px 0 30px;
	padding: 40px 0;
	border-top: 1px solid #9e9e9e;
	border-bottom: 1px solid #9e9e9e;
}

.menu-copy>li+li{
	margin-top: 35px;
}

.menu-copy>li>a{
	display: inline-block;
	color: #9e9e9e;
	font-size: 24px;
	letter-spacing: -0.25px;
}

.menu-sns{
	padding-bottom: 50px;
	text-align: right;
	font-size: 0;
}

.menu-sns>li{
	display: inline-block;
}

.menu-sns>li+li{
	margin-left: 20px;
}

.menu-sns>li>a{
	display: block;
	position: relative;
	width: 60px;
	height: 60px;
	background-color: #6a7bff;
	border-radius: 50%;
}

.menu-sns>li>a:after{
	position: absolute;
	top: 50%;
	left: 50%;
	background-image: url(/img/common.png);
	content: "";
}

.menu-sns>li:nth-of-type(1)>a:after{
	margin: -18px;
	width: 36px;
	height: 36px;
	background-position: -33px -223px;
}

.menu-sns>li:nth-of-type(2)>a:after{
	margin: -17px -18px;
	width: 36px;
	height: 35px;
	background-position: -79px -224px;
}

/* footer */

footer{
	padding: 60px 0 70px;
	background-color: #333;
}

footer .wrapper{
	position: relative;
}

.ft-info{
	padding-bottom: 20px;
	font-size: 0;
	text-align: right;
}

.ft-info>li{
	display: inline-block;
	position: relative;
}

.ft-info>li>a{
	display: block;
	color: #f8f8f8;
	font-size: 16px;
	font-weight: 300;
}

.ft-info>li+li{
	margin-left: 20px;
	padding-left: 20px;
}

.ft-info>li+li:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background-color: #d3d3d3;
	content: "";
}

.privacy-bg{
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	transition: visibility 0.3s, opacity 0.3s;
	z-index: 21;
}

.privacy-bg.active{
	visibility: visible;
	opacity: 1;
}

.privacy{
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	padding: 100px 80px;
	max-width: 1100px;
	background-color: #fff;
	border-radius: 30px;
	transition: visibility 0.3s, opacity 0.3s;
	transform: translateY(-50%);
	z-index: 22;
}

.privacy.active{
	visibility: visible;
	opacity: 1;
}

.privacy .close{
	position: absolute;
	top: -60px;
	right: 0;
	cursor: pointer;
}

.privacy>h2{
	padding-bottom: 40px;
	color: #6a7bff;
	font-size: 32px;
	font-weight: 700;
}

.privacy>ul+ul{
	padding-top: 35px;
}

.privacy .privacy-title{
	padding-bottom: 10px;
	font-size: 24px;
	font-weight: 700;
}

.privacy .privacy-info{
	font-size: 20px;
	font-weight: 700;
}

.privacy .privacy-info+.privacy-info{
	padding-top: 10px;
}

.privacy .consent{
	padding-top: 80px;
}

.privacy .consent>a{
	float: left;
	width: calc(50% - 12px);
	line-height: 80px;
	border-radius: 10px;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}

.privacy .consent>a:nth-of-type(1){
	margin-right: 24px;
	background-color: #e1e1e1;
}

.privacy .consent>a:nth-of-type(2){
	color: #fff;
	background-color: #6a7bff;
}

.ft-copy{
	padding-top: 25px;
	border-top: 2px solid #f8f8f8;
	color: #f8f8f8;
}

.ft-copy>h2{
	padding-bottom: 15px;
	font-size: 21px;
}

.ft-copy>ul{
	float: left;
	font-size: 0;
}

.ft-copy>ul>li{
	display: inline-block;
	position: relative;
	margin-left: 11px;
	padding-left: 11px;
	font-size: 16px;
	font-weight: 300;
}

.ft-copy>ul:nth-of-type(1)>li:nth-of-type(1){
	margin-left: 0;
	padding-left: 0;
}

.ft-copy>ul:nth-of-type(2)>li:nth-of-type(3){
	display: none;
}

.ft-copy>ul>li:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 100%;
	background-color: #d3d3d3;
	content: "";
}

.ft-copy>ul:nth-of-type(1)>li:nth-of-type(1):after{
	display: none;
}

.ft-sns{
	position: absolute;
	right: 50px;
	bottom: -10px;
	font-size: 0;
}

.ft-sns>li{
	display: inline-block;
}

.ft-sns>li+li{
	margin-left: 10px;
}

.ft-sns>li>a{
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	background-color: #6a7bff;
	border-radius: 50%;
}

.ft-sns>li>a:after{
	position: absolute;
	top: 50%;
	left: 50%;
	background-image: url(/img/common.png);
	background-size: 200px 200px;
	content: "";
}

.ft-sns>li:nth-of-type(1)>a:after{
	margin: -13px -12px;
	width: 24px;
	height: 26px;
	background-position: -22px -114px;
}

.ft-sns>li:nth-of-type(2)>a:after{
	margin: -13px;
	width: 26px;
	height: 26px;
	background-position: -51px -112px;
}

/* 하단 contact */

.contact-bg{
	position: relative;
}

.contact-bg:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background-image: url(/img/ft_shadow.png);
	content: "";
	z-index: 1;
}

.contact{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #6a7bff;
}

.contact-form{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	color: #fff;
	text-align: center;
	transform: translateY(-50%);
	letter-spacing: -0.25px;
}

.contact-form h2{
	font-size: 36px;
}

.contact-form p{
	padding: 25px 0 55px;
	line-height: 35px;
	font-size: 22px;
}

.contact-form a{
	display: inline-block;
	position: relative;
	padding: 12px 43px 12px 30px;
	background-color: #fff;
	border-radius: 9999px;
	color: #6a7bff;
	font-size: 18px;
	letter-spacing: 0.5px;
}

.contact-form a:after{
	position: absolute;
	top: 0;
	right: 30px;
	bottom: 0;
	margin: auto 0;
	width: 7px;
	height: 11px;
	background-image: url(/img/common.png);
	background-position: -29px -5px;
	content: "";
}

/* main visual */

.visual{
	overflow: hidden;
	position: relative;
	padding-bottom: 35%;
}

.visual video{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	transform: translate(-50%, -50%);
}

.visual .m-visual{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/img/visual.jpg);
	background-size: cover;
	background-position: center;
}

/* main partnership */

.partnership{
	overflow: hidden;
	background-color: #f1f1f1;
}

.partnership .partnership-inner{
	position: relative;
	height: 100%;
	-webkit-animation: partnership 100s infinite linear;
	-moz-animation: partnership 100s infinite linear;
    -ms-animation: partnership 100s infinite linear;
    -o-animation: partnership 100s infinite linear;
    animation: partnership 100s infinite linear;
}

@-webkit-keyframes partnership{
	from{
		transform: translateX(0);
	}
	
	to{
		transform: translateX(-100%);
	}
}

@-moz-keyframes partnership{
	from{
		transform: translateX(0);
	}
	
	to{
		transform: translateX(-100%);
	}
}

@-ms-keyframes partnership{
	from{
		transform: translateX(0);
	}
	
	to{
		transform: translateX(-100%);
	}
}

@-o-keyframes partnership{
	from{
		transform: translateX(0);
	}
	
	to{
		transform: translateX(-100%);
	}
}

@keyframes partnership{
	from{
		transform: translateX(0);
	}
	
	to{
		transform: translateX(-100%);
	}
}

.partnership ul{
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
}

.partnership ul:nth-of-type(2){
	left: 100%;
}

.partnership ul li{
	float: left;
	margin-left: 32px;
}

.partnership ul li img{
	display: block;
}

/* main company */

.company{
	position: relative;
	padding-bottom: 35%;
	background-image: url(/img/company.png);
	background-size: cover;
	background-position: 53% center;
}

.company:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background-image: url(/img/company_shadow.png);
	content: "";
}

.company .company-inner{
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	padding: 0 50px;
	width: 100%;
	max-width: 1200px;
	transform: translateY(-50%);
}

.company .company-inner .cancel{
	display: none;
}

.company .company-inner>h2{
	color: #6a7bff;
	font-size: 36px;
	letter-spacing: -0.25px;
}

.company .company-inner>p{
	padding: 25px 0 55px;
	line-height: 35px;
	color: #333;
	font-size: 22px;
	letter-spacing: -0.25px;
}

.company .company-inner>a{
	display: inline-block;
	position: relative;
	padding: 12px 44px 11px 30px;
	background-color: #6a7bff;
	border-radius: 9999px;
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.5px;
}

.company .company-inner>a:after{
	position: absolute;
	top: 50%;
	right: 30px;
	margin-top: -6px;
	width: 7px;
	height: 11px;
	background-image: url(/img/common.png);
	background-position: -12px -5px;
	content: "";
}

/* main marketing */

.marketing{
	position: relative;
	padding-bottom: 35%;
}

.marketing>li{
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.marketing>li:nth-of-type(1){
	left: 0;
	background-image: url(/img/creative_bg.png);
}

.marketing>li:nth-of-type(2){
	right: 0;
	background-image: url(/img/casestudy_bg.png);
}

.marketing>li>a{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.marketing>li>a:after{
	opacity: 0;
	position: absolute;
	bottom: 60px;
	left: 45%;
	margin-left: -40px;
	width: 80px;
	height: 20px;
	background-image: url(/img/common.png);
	background-position: -6px -29px;
	transition: opacity .3s, left .3s;
	content: "";
}

.marketing>li:hover>a:after{
	opacity: 1;
	left: 50%;
}

.marketing>li>a>span{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #fff;
	font-family: 'NunitoSans';
	font-size: 60px;
	font-weight: 600;
	text-align: center;
	transform: translateY(-50%);
}

/* main portfolio */

.portfolio-wrapper{
	margin: 0 auto;
	padding: 0 50px;
	width: 100%;
	max-width: 1300px;
}

.portfolio-wrapper .swiper-container{
	padding-bottom: 42px;
}

.portfolio-wrapper .swiper-slide{
	width: 240px;
	height: 240px;
}

.portfolio-wrapper .swiper-slide:nth-of-type(1){
	margin-left: 50px;
}

.portfolio-wrapper .swiper-slide>a{
	display: block;
	overflow: hidden;
	position: relative;
	height: 100%;
	border: 1px solid #e1e1e1;
}

.portfolio-wrapper .swiper-slide>a>img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.5s;
}

.portfolio-wrapper .swiper-slide:hover>a>img.sum{
	transform: scale(1.05);
}

.portfolio-wrapper .swiper-slide>a>img.sum-h{
	opacity: 0;
}

.portfolio-wrapper .swiper-slide:hover>a>img.sum-h{
	opacity: 1;
}

.portfolio-wrapper .swiper-scrollbar{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 50px;
	height: 2px;
	background-color: #dddfe1;
	border-radius: 0;
}

.portfolio-wrapper .swiper-scrollbar .swiper-scrollbar-drag{
	background-color: #6a7bff;
	border-radius: 0;
}

/* main casestudy */

.casestudy-inner{
	position: relative;
	padding: 85px 0;
	background-color: #f8f8f8;
}

.casestudy-inner:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 38px;
	background-image: url(/img/casestudy_shadow.png);
	content: "";
}

.casestudy-inner ul li{
	float: left;
	width: 32%;
}

.casestudy-inner ul li a{
	display: block;
}

.casestudy-inner ul li:nth-of-type(2){
	margin: 0 2%;
}

.casestudy-inner ul li img{
	display: block;
	width: 100%;
	background-position: center center;
	border: 1px solid #e1e1e1;
	border-radius: 50%;
}

.casestudy-inner ul li:nth-of-type(1) img{
	background-image: url(/img/casestudy_01.png);
}

.casestudy-inner ul li:nth-of-type(2) img{
	background-image: url(/img/casestudy_02.png);
}

.casestudy-inner ul li:nth-of-type(3) img{
	background-image: url(/img/casestudy_03.png);
}

.casestudy-inner ul li p{
	padding-top: 30px;
	line-height: 35px;
	font-size: 24px;
	text-align: center;
}

/* company page */

#company .company{
	background-image: url(/img/company_profile.png);
	background-color: #5dd4f7;
}

#company .company-inner>h2{
	color: #333;
	letter-spacing: 0;
}

#company .company-inner>p{
	padding: 20px 0 0;
}

#company .company .sign{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 1700px;
}

#company .company .sign>img{
	float: right;
}

.slogan{
	position: relative;
	padding-bottom: 35%;
	background-image: url(/img/slogan_bg.png);
	background-size: cover;
}

.slogan img{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.slogan img:nth-of-type(1){
	opacity: 1;
	transition: opacity .7s;
}

.slogan:hover img:nth-of-type(1){
	opacity: 0;
}

.slogan img:nth-of-type(2){
	opacity: 0;
	transition: opacity .7s;
	z-index: 1;
}

.slogan:hover img:nth-of-type(2){
	opacity: 1;
}

.work .title-wrapper>a>span:after{
	display: none;
}

.work-wrapper{
	position: relative;
	padding: 85px 0;
	background-color: #f8f8f8;
}

.work-wrapper:after{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 38px;
	background-image: url(/img/work_shadow.png);
	content: "";
}

.work-wrapper>ul{
	padding: 0 40px;
}

.work-wrapper>ul>li{
	float: left;
	width: 18%;
}

.work-wrapper>ul>li+li{
	margin-left: 2.5%;
}

.work-wrapper>ul>li img{
	display: block;
	width: 100%;
	border-radius: 50%;
}

.work-wrapper>ul>li p{
	margin-top: 30px;
	line-height: 35px;
	font-size: 24px;
	text-align: center;
	letter-spacing: -0.25px;
}

.work-container{
	display: none;
}

.work-container img{
	display: block;
	width: 100%;
	border-radius: 50%;
}

.work-container p{
	margin-top: 30px;
	line-height: 35px;
	font-size: 24px;
	text-align: center;
	letter-spacing: -0.25px;
}

/* creative page, casestudy page */

.item-middle{
	padding-bottom: 300px;
}

.item-middle>li{
	float: left;
	width: 25%;
	height: 300px;
}

.item-middle>li>a{
	display: block;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.item-middle>li>a>span{
	position: absolute;
	top: 30px;
	left: 30px;
	padding: 10px;
	background-color: #6a7bff;
	color: #fff;
	font-family: 'NunitoSans';
	font-size: 20px;
	font-weight: 400;
	z-index: 1;
}

.item-middle>li>a>img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: all 0.5s;
}

.item-middle>li:hover>a>img.sum{
	transform: scale(1.05);
}

.item-middle>li>a>img.sum-h{
	opacity: 0;
	z-index: 1;
}

.item-middle>li:hover>a>img.sum-h{
	opacity: 1;
}

/*portfolio*/

.portfolio-info{
	padding: 100px 0 200px;
}

.portfolio-info>h3{
	color: #333;
	font-size: 36px;
}

.portfolio-info>p{
	padding-top: 25px;
	color: #333;
	font-size: 22px;
	letter-spacing: -0.25px;
}

.portfolio-info>a{
	display: inline-block;
	margin: 40px 0 100px;
	padding: 0 35px;
	line-height: 36px;
	border: 2px solid #6a7bff;
	border-radius: 9999px;
	color: #6a7bff;
	font-size: 18px;
	text-align: center;
}

.portfolio-info>img{
	display: block;
	width: 100%;
}

.portfolio-info>img.tag{
	padding-top: 140px;
}

.casestudy-item{
	padding-top: 140px;
}

.tab-menu>li{
	float: left;
}

.tab-menu>li+li{
	margin-left: 40px;
}

.tab-menu>li>span{
	display: inline-block;
	position: relative;
	padding-bottom: 18px;
	color: #c9c9c9;
	font-size: 26px;
	font-weight: 300;
	cursor: pointer;
}

.tab-menu>li.active>span{
	color: #7686ff;
	font-weight: 700;
}

.tab-menu>li.active>span:after{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #7686ff;
	content: "";
}

.tab-item{
	padding-top: 40px;
}

.tab-item>li{
	display: none;
}

.tab-item>li.active{
	display: block;
}

.tab-item>li>img{
	display: block;
	width: 100%;
}

.tab-item .item-info{
	padding-top: 130px;
	text-align: center;
	letter-spacing: -0.25px;
}

.tab-item .item-info>p{
	padding-bottom: 30px;
	color: #c9c9c9;
	font-size: 36px;
}

.tab-item .item-info>span{
	display: block;
	color: #333;
	font-size: 60px;
}

.tab-item .item-info>span>small{
	color: #7686ff;
	font-size: 140px;
	font-weight: 300;
}

.tab-item .item-info>span>i{
	color: #7686ff;
	font-style: normal;
	font-size: 120px;
	font-weight: 300;
}

.tab-item .item-info>img{
	display: block;
	width: 100%;
}

/* contact page */

.contact-inner{
	padding-top: 120px;
}

.contact-title{
	margin-bottom: 60px;
	color: #333;
}

.contact-title>h3{
	padding-bottom: 25px;
	font-size: 36px;
}

.contact-title>p{
	font-size: 22px;
	letter-spacing: -0.25px;
}

.contact-title>p>span{
	color: #ef404a;
}

.contact-ct.request, .contact-ct.budget{
	margin-top: -20px;
}

.project{
	float: left;
	width: calc(50% - 35px);
}

.project:nth-of-type(2){
	margin-left: 70px;
}

.project>h3{
	margin-bottom: 40px;
	padding-bottom: 10px;
	font-size: 20px;
	font-weight: 700;
	border-bottom: 1px solid;
}

.project:nth-of-type(1)>h3{
	color: #5acced;
	border-color: #5acced;
}

.project:nth-of-type(2)>h3{
	color: #6fceb2;
	border-color: #6fceb2;
}

.form-chk.etc{
	position: relative;
}

.form-chk+.form-chk{
	margin-top: 40px;
}

.form-chk>input{
	display: none;
}

.form-chk>label{
	position: relative;
	padding-left: 30px;
	color: #333;
	font-size: 20px;
	cursor: pointer;
}

.form-chk.company-form>label{
	float: left;
}

.form-chk>input:checked+label{
	color: #6a7bff;
}

.form-chk>label:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	width: 18px;
	height: 18px;
	border: 2px solid #dddfe1;
	box-sizing: border-box;
	content: "";
}

.form-chk>input:checked+label:after{
	background-color: #6a7bff;
	border-color: #6a7bff;
}

.form-chk>div{
	float: left;
	margin-top: -6px;
	margin-left: 10px;
	font-size: 0;
}

.form-chk input[type="text"]{
	padding: 0 0 0 10px;
	width: 200px;
	height: 36px;
	border: 1px solid #dddfe1;
}

.form-chk input[type="text"]+input[type="text"]{
	margin-left: 10px;
}

.form-chk input[type="text"]:disabled{
	background-color: #dddfe1;
}

.form-chk>input[type="text"]{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	width: calc(100% - 75px);
}

.form-btn{
	float: left;
	margin-top: 20px;
	margin-right: 20px;
}

.form-btn>input{
	display: none;
}

.form-btn>label{
	display: block;
	line-height: 36px;
	border: 2px solid #6a7bff;
	border-radius: 9999px;
	color: #6a7bff;
	font-size: 18px;
	text-align: center;
	cursor: pointer;
}

.request .form-btn>label{
	width: 180px;
}

.budget .form-btn>label{
	padding: 0 35px;
}

.form-btn>input:checked+label{
	background-color: #6a7bff;
	color: #fff;
}

.contact-ct textarea{
	padding: 10px;
	width: 100%;
	height: 200px;
	border: 1px solid #dddfe1;
}

.form-address{
	margin-top: 40px;
}

.form-address>label{
	display: block;
	margin-bottom: 20px;
	max-width: 280px;
	color: #333;
	font-size: 20px;
	cursor: pointer;
}

.form-address>label>span{
	color: #ef404a;
}

.form-address>input{
	display: block;
	padding: 0 0 0 10px;
	width: 200px;
	height: 40px;
	border: 1px solid #dddfe1;
}

.form-address.long>input{
	width: 600px;
}

.form-submit{
	margin-top: 120px;
	padding: 50px 0 60px;
	background-color: #6a7bff;
	text-align: center;
}

.form-submit>input{
	display: none;
}

.form-submit>label{
	position: relative;
	padding-left: 25px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

.form-submit>label:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	width: 18px;
	height: 18px;
	border: 2px solid #fff;
	box-sizing: border-box;
	content: "";
}

.form-submit>input:checked+label:after{
	background-color: #fff;
}

.form-submit>label>span{
	text-decoration: underline;
}

.form-submit>div{
	margin-top: 30px;
}

.form-submit>div>button{
	opacity: 0.4;
	padding: 0 35px;
	line-height: 50px;
	background-color: #fff;
	border: 0;
	border-radius: 9999px;
	color: #6a7bff;
	font-size: 20px;
	cursor: pointer;
	transition: 0.3s;
}

.form-submit>input:checked~ div>button{
	opacity: 1;
}

.form-submit button>span{
	font-weight: 700;
}

/*media query*/

@media(max-width: 1200px){
	
	/* common */
	
	.swiper-con{
		transform: translate(0);
	}
	
	.swiper-prev.swiper-button-disabled{
		transform: translate(-100%);
	}
	
	.swiper-next.swiper-button-disabled{
		transform: translate(100%);
	} 
	
	.work-wrapper .swiper-con{
		display: block;
		bottom: auto;
	}
	
	/* header */
	
	.menu>li+li{
		margin-left: 40px;
	}
	
	/* footer */
	
	.privacy{
		margin: 0 50px;
	}
	
	.ft-copy>ul{
		float: inherit;
	}
	
	.ft-copy>ul+ul{
		margin-top: 7px;
	}
	
	.ft-copy>ul:nth-of-type(2)>li:nth-of-type(1){
		margin-left: 0;
		padding-left: 0;
	}
	
	.ft-copy>ul:nth-of-type(2)>li:nth-of-type(1):after{
		display: none;
	}
	
	.ft-sns{
		bottom: 0;
	}
	
	/* main visual */
	
	.visual{
		padding-bottom: 40%;
	}
	
	/* main company */
	
	.company{
		padding-bottom: 40%;
	}
	
	#company .company .sign>img{
		width: 300px;
	}
	
	/* main marketing */
	
	.marketing{
		padding-bottom: 40%;
	}
	
	/* company page */
	
	.slogan{
		padding-bottom: 40%;
	}
	
	.slogan img:nth-of-type(1){
		opacity: 0;
	}
	
	.slogan img:nth-of-type(2){
		opacity: 1;
		width: 80vw;
	}
	
	.work-wrapper{
		padding: 85px 50px;
	}
	
	.work-wrapper>ul{
		display: none;
	}
	
	.work-container{
		display: block;
	}
	
	/* creative page, casestudy page */
	
	.item-middle>li{
		width: 33.333%;
	}
	
	/*portfolio*/
	
	.tab-menu>li{
		padding-bottom: 20px;
		width: 33.333%;
		text-align: center;
	}
	
	.tab-menu>li+li{
		margin-left: 0;
	}
	
}

@media(max-width: 768px){
	
	/* common */

	.wrapper{
		padding: 0 40px;
	}
	
	.container{
		margin-top: 110px;
	}
	
	.title-wrapper{
		padding: 120px 0 35px;
	}
	
	.title-wrapper h2{
		margin-bottom: 10px;
	}
	
	.title-wrapper>a:hover>span:after{
		opacity: 0;
	}
	
	.swiper-con{
		bottom: 0;
	}
	
	.work-wrapper .swiper-con{
		display: none;
	}
	
	.item-top p{
		line-height: 200px;
		font-size: 32px;
	}
	
	/* header */
	
	header{
		padding: 40px 0;
	}
	
	.menu{
		display: none;
	}
	
	.m-menu{
		display: block;
	}
	
	/* footer */
	
	.ft-info{
		display: none;
	}
	
	.privacy .consent{
		padding-top: 40px;
	}
	
	.ft-copy{
		padding: 50px 0;
		border-bottom: 2px solid #f8f8f8;
	}
	
	.ft-copy>h2{
		padding-bottom: 30px;
		font-size: 26px;
	}
	
	.ft-copy>ul>li{
		font-size: 20px;
	}
	
	.ft-copy>ul+ul>li{
		display: block;
	}
	
	.ft-copy>ul:nth-of-type(2)>li{
		margin-top: 10px;
		margin-left: 0;
		padding-left: 0;
	}
	
	.ft-copy>ul:nth-of-type(2)>li:nth-of-type(3){
		display: block;
	}
	
	.ft-copy>ul:nth-of-type(2)>li:after{
		display: none;
	}
	
	.ft-sns{
		right: 40px;
		bottom: -30px;
		padding-left: 20px;
		background-color: #333;
	}
	
	.ft-sns>li+li{
		margin-left: 20px;
	}
	
	.ft-sns>li>a{
		width: 60px;
		height: 60px;
	}
	
	.ft-sns>li>a:after{
		background-size: 300px 300px;
	}
	
	.ft-sns>li:nth-of-type(1)>a:after{
		margin: -18px;
		width: 36px;
		height: 36px;
		background-position: -33px -172px;
	}
	
	.ft-sns>li:nth-of-type(2)>a:after{
		margin: -17px -18px;
		width: 36px;
		height: 35px;
		background-position: -79px -172px;
	}
	
	/* 하단 contact */
	
	.contact-form h2{
		font-size: 40px;
	}
	
	.contact-form p{
		padding: 20px 0 35px;
	}
	
	.contact-form a{
		padding: 10px 28px;
		font-size: 20px;
		font-weight: 700;
	}
	
	.contact-form a:after{
		display: none;
	}
	
	/* main visual */
	
	.visual{
		padding-bottom: 0;
		height: 800px;
	}
	
	.visual video{
		display: none;
	}
	
	.visual .m-visual{
		display: block;
	}
	
	/* main company */
	
	.company{
		padding-bottom: 0;
		height: 800px;
	}
	
	.company .company-inner{
		position: static;
		padding: 100px 40px 0;
		transform: none;
	}
	
	.company .company-inner .cancel{
		display: block;
	}
	
	.company .company-inner>p{
		padding: 25px 0 40px;
	}
	
	.company .company-inner>a{
		padding: 10px 30px;
		font-size: 20px;
		font-weight: 700;
	}
	
	.company .company-inner>a:after{
		display: none;
	}
	
	#company .company .sign{
		bottom: 30px;
	}
	
	#company .company .sign>img{
		float: left;
		margin-left: 40px;
	}
	
	/* main marketing */
	
	.marketing{
		padding-bottom: 0;
	}
	
	.marketing>li{
		position: static;
		width: 100%;
		height: 200px;
	}
	
	.marketing>li>a:after{
		display: none;
	}
	
	.marketing>li>a>span{
		font-size: 40px;
	}
	
	/* main portfolio */
	
	.portfolio-wrapper{
		padding: 0;
	}
	
	.portfolio-wrapper .swiper-container{
		padding-bottom: 0;
	}
	
	.portfolio-wrapper .swiper-slide{
		width: 100%;
		padding-bottom: 80%;
	}
	
	.portfolio-wrapper .swiper-slide:nth-of-type(1){
		margin-left: 0;
	}
	
	.portfolio-wrapper .swiper-slide>a{
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		margin: 0 40px;
		width: auto;
	}
	
	.portfolio-wrapper .swiper-scrollbar{
		display: none;
	}
	
	/* main casestudy */
	
	.casestudy-inner{
		padding: 60px 0;
	}
	
	.casestudy-inner ul li{
		float: inherit;
		width: 100%;
	}
	
	.casestudy-inner ul li:nth-of-type(2){
		margin: 60px 0 0;
	}
	
	.casestudy-inner ul li+li{
		margin-top: 60px;
	}
	
	.casestudy-inner ul li img{
		margin: 0 auto;
		width: 380px;
		border-width: 2px;
	}
	
	.casestudy-inner ul li p{
		padding-top: 20px;
		font-size: 28px;
	}
	
	/* company page */
	
	#company .company-inner>p{
		padding: 35px 0 0;
	}
	
	.slogan{
		padding-bottom: 0;
		height: 200px;
	}
	
	.work-wrapper{
		padding: 60px 0;
	}
	
	.work-wrapper>ul{
		display: block;
		padding: 0;
	}
	
	.work-wrapper>ul>li{
		float: inherit;
		width: 100%;
	}
	
	.work-wrapper>ul>li+li{
		margin: 60px 0 0;
	}
	
	.work-wrapper>ul>li img{
		margin: 0 auto;
		width: 380px;
	}
	
	.work-wrapper>ul>li p{
		margin-top: 20px;
		font-size: 28px;
	}
	
	.work-container{
		display: none;
	}
	
	/* creative page, casestudy page */
	
	.item-middle{
		padding-bottom: 400px;
	}
	
	.item-middle>li{
		width: 50%;
		height: 400px;
	}
	
	.item-middle>li>a>span{
		top: 40px;
		left: 40px;
		padding: 20px;
		font-size: 24px;
	}
	
	/* portfolio */
	
	.portfolio-info>img.tag{
		padding-top: 70px;
	}
	
	.casestudy-item{
		padding-top: 70px;
	}
	
	.tab-menu>li{
		padding-bottom: 10px;
	}
	
	.tab-menu>li>span{
		padding-bottom: 9px;
		font-size: 18px;
	}
	
	.tab-menu>li.active>span:after{
		height: 1px;
	}
	
	.tab-item{
		padding-top: 20px;
	}
	
	.tab-item .item-info{
		padding-top: 65px;
	}
	
	.tab-item .item-info>p{
		padding-bottom: 15px;
		font-size: 24px;
	}
	
	.tab-item .item-info>span{
		font-size: 30px;
	}
	
	.tab-item .item-info>span>small{
		font-size: 70px;
	}
	
	.tab-item .item-info>span>i{
		font-size: 60px;
	}
	
	/* contact page */
	
	.contact-inner{
		padding-top: 100px;
	}
	
	.contact-title{
		margin-bottom: 50px;
	}
	
	.contact-ct.request, .contact-ct.budget{
		margin-top: -30px;
	}
	
	.project{
		float: inherit;
		width: 100%;
	}
	
	.project:nth-of-type(2){
		margin-top: 90px;
		margin-left: 0;
	}
	
	.project>h3{
		margin-bottom: 30px;
		padding-bottom: 30px;
		font-size: 26px;
	}
	
	.form-chk+.form-chk{
		margin-top: 45px;
	}
	
	.form-chk>label{
		padding-left: 45px;
	}
	
	.form-chk>label:after{
		width: 34px;
		height: 34px;
	}
	
	.form-chk>div{
		float: right;
		width: calc(100% - 100px);
		margin-top: -18px;
		margin-left: 0;
	}
	
	.form-chk input[type="text"]{
		width: 100%;
		height: 60px;
	}
	
	.form-chk input[type="text"]+input[type="text"]{
		margin-top: 20px;
		margin-left: 0;
	}
	
	.form-chk>input[type="text"]{
		width: calc(100% - 100px);
	}
	
	.form-btn{
		margin-top: 30px;
		margin-right: 2%;
	}
	
	.request .form-btn{
		width: 32%;
	}
	
	.request .form-btn:nth-of-type(3n), .budget .form-btn:nth-of-type(2n){
		margin-right: 0;
	}
	
	.budget .form-btn{
		width: 49%;
	}
	
	.form-btn>label{
		line-height: 50px;
	}
	
	.request .form-btn>label{
		width: 100%;
	}
	
	.budget .form-btn>label{
		padding: 0;
	}
	
	.contact-ct textarea{
		height: 240px;
	}
	
	.form-address-inner .form-address{
		float: left;
		width: calc(50% - 20px);
	}
	
	.form-address-inner .form-address:nth-of-type(2){
		margin-left: 40px;
	}
	
	.form-address>label{
		max-width: 100%;
	}
	
	.form-address>input{
		width: 100%;
		height: 60px;
	}
	
	.form-address.long>input{
		width: 100%;
	}
	
	.form-submit{
		padding: 50px 0;
	}
	
	.form-submit>div{
		margin-top: 25px;
	}
	
	.form-submit>div>button{
		line-height: 65px;
	}
	
}

@media(max-width: 576px){
	
	/* common */
	
	.wrapper{
		padding: 0 20px;
	}
	
	.container{
		margin-top: 53px;
	}
	
	.title-wrapper{
		padding: 60px 0 17px;
	}
	
	.title-wrapper h2{
		margin-bottom: 5px;
		font-size: 18px;
	}
	
	.title-wrapper span{
		font-size: 13px;
	}
	
	.swiper-con{
		width: 40px;
		height: 40px;
	}
	
	.swiper-con:after{
		width: 7px;
		height: 11px;
		background-size: 150px 150px;
	}
	
	.swiper-con.swiper-prev:after{
		background-position: -3px -53px;
	}
	
	.swiper-con.swiper-next:after{
		background-position: -4px -67px;
	}
	
	.item-top p{
		line-height: 100px;
		font-size: 16px;
	}
	
	/* header */
	
	header{
		padding: 20px 0;
	}
	
	header.active{
		padding: 20px 0;
	}
	
	.logo>img{
		width: 103px;
		height: auto;
	}
	
	.hamburger{
		margin-top: -7px;
		right: 20px;
		width: 15px;
		height: 15px;
	}
	
	.hamburger>i{
		height: 1px;
	}
	
	.hamburger>i:nth-of-type(2){
		margin-top: 0;
	}
	
	.hamburger>i:nth-of-type(3){
		margin-top: -1px;
	}
	
	.hamburger:after{
		margin: -15px;
		width: 30px;
		height: 30px;
	}
	
	.category{
		margin-top: 50px;
	}
	
	.category>li+li{
		margin-top: 35px;
	}
	
	.category>li>a{
		padding-bottom: 7px;
		font-size: 20px;
	}
	
	.menu-form{
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0 20px;
	}
	
	.menu-copy{
		margin: 0 0 15px;
		padding: 20px 0;
	}
	
	.menu-copy>li+li{
		margin-top: 17px;
	}
	
	.menu-copy>li>a{
		font-size: 12px;
	}
	
	.menu-sns{
		padding-bottom: 25px;
	}
	
	.menu-sns>li+li{
		margin-left: 10px;
	}
	
	.menu-sns>li>a{
		width: 30px;
		height: 30px;
	}
	
	.menu-sns>li>a:after{
		background-size: 150px 150px;
	}
	
	.menu-sns>li:nth-of-type(1)>a:after{
		margin: -9px -11px;
		width: 22px;
		height: 19px;
		background-position: -14px -112px;
	}
	
	.menu-sns>li:nth-of-type(2)>a:after{
		margin: -10px;
		width: 20px;
		height: 20px;
		background-position: -39px -111px;
	}
	
	/* footer */
	
	footer{
		padding: 30px 0 35px;
	}
	
	.privacy{
		margin: 0 20px;
		padding: 40px 20px;
		border-radius: 20px;
	}
	
	.privacy .close{
		top: -40px;
		width: 24px;
	}
	
	.privacy>h2{
		padding-bottom: 20px;
		font-size: 16px;
	}
	
	.privacy>ul+ul{
		padding-top: 17px;
	}
	
	.privacy .privacy-title{
		padding-bottom: 5px;
		font-size: 12px;
	}
	
	.privacy .privacy-info{
		font-size: 10px;
	}
	
	.privacy .privacy-info+.privacy-info{
		padding-top: 5px;
	}
	
	.privacy .consent{
		padding-top: 20px;
	}
	
	.privacy .consent>a{
		width: calc(50% - 6px);
		line-height: 40px;
		border-radius: 5px;
		font-size: 12px;
	}
	
	.privacy .consent>a:nth-of-type(1){
		margin-right: 12px;
	}
	
	.ft-copy{
		padding: 25px 0;
		border-width: 1px;
	}
	
	.ft-copy>h2{
		padding-bottom: 15px;
		font-size: 13px;
	}
	
	.ft-copy>ul>li{
		font-size: 10px;
		margin-left: 5px;
		padding-left: 5px;
	}
	
	.ft-copy>ul:nth-of-type(2)>li{
		margin-top: 5px;
	}
	
	.ft-sns{
		right: 20px;
		bottom: -15px;
		padding-left: 10px;
	}
	
	.ft-sns>li+li{
		margin-left: 10px;
	}
	
	.ft-sns>li>a{
		width: 30px;
		height: 30px;
	}
	
	.ft-sns>li>a:after{
		background-size: 150px 150px;
	}
	
	.ft-sns>li:nth-of-type(1)>a:after{
		margin: -9px -10px;
		width: 20px;
		height: 18px;
		background-position: -16px -86px;
	}
	
	.ft-sns>li:nth-of-type(2)>a:after{
		margin: -9px -10px;
		width: 20px;
		height: 18px;
		background-position: -39px -86px;
	}
	
	/* 하단 contact */
	
	.contact-form h2{
		font-size: 20px;
	}
	
	.contact-form p{
		padding: 10px 0 17px;
		line-height: 20px;
		font-size: 11px;
	}
	
	.contact-form a{
		padding: 5px 14px;
		font-size: 10px;
	}
	
	/* main visual */
	
	.visual{
		height: 400px;
	}
	
	/* main partnership */
	
	.partnership ul li img{
		height: 50px;
	}
	
	/* main company */
	
	.company{
		height: 400px;
	}
	
	.company .company-inner{
		padding: 50px 20px 0;
	}
	
	.company .company-inner>h2{
		font-size: 18px;
	}
	
	.company .company-inner>p{
		padding: 12px 0 20px;
		line-height: 18px;
		font-size: 11px;
	}
	
	.company .company-inner>a{
		padding: 5px 15px;
		font-size: 10px;
	}
	
	.company .company-inner>a:after{
		display: none;
	}
	
	#company .company .sign>img{
		margin-left: 20px;
		width: 150px;
	}
	
	/* main marketing */
	
	.marketing>li{
		height: 100px;
	}
	
	.marketing>li>a>span{
		font-size: 20px;
	}
	
	/* main portfolio */
	
	.portfolio-wrapper .swiper-slide>a{
		margin: 0 20px;
	}
	
	/* main casestudy */
	
	.casestudy-inner{
		padding: 30px 0;
	}
	
	.casestudy-inner ul li:nth-of-type(2){
		margin: 30px 0 0;
	}
	
	.casestudy-inner ul li+li{
		margin-top: 30px;
	}
	
	.casestudy-inner ul li img{
		width: 190px;
	}
	
	.casestudy-inner ul li p{
		padding-top: 10px;
		line-height: 20px;
		font-size: 14px;
	}
	
	/* company page */
	
	#company .company-inner>p{
		padding: 17px 0 0;
	}
	
	.slogan{
		height: 100px;
	}
	
	.work-wrapper{
		padding: 30px 0;
	}
	
	.work-wrapper>ul>li+li{
		margin: 30px 0 0;
	}
	
	.work-wrapper>ul>li img{
		width: 190px;
	}
	
	.work-wrapper>ul>li p{
		margin-top: 10px;
		line-height: 20px;
		font-size: 14px;
	}
	
	/* creative page, casestudy page */
	
	.item-middle{
		padding-bottom: 0;
	}
	
	.item-middle>li{
		float: inherit;
		width: 100%;
		height: 200px;
	}
	
	.item-middle>li>a>span{
		top: 20px;
		left: 20px;
		padding: 10px;
		font-size: 12px;
	}
	
	/*portfolio*/

	.portfolio-info{
		padding: 50px 0 100px;
	}
	
	.portfolio-info>h3{
		font-size: 18px;
	}
	
	.portfolio-info>p{
		padding-top: 12px;
		font-size: 11px;
	}
	
	.portfolio-info>a{
		margin: 20px 0 50px;
		padding: 0 17px;
		line-height: 18px;
		border-width: 1px;
		font-size: 10px;
	}
	
	.portfolio-info>img.tag{
		padding-top: 35px;
	}
	
	.casestudy-item{
		padding-top: 35px;
	}
	
	.tab-menu>li{
		padding-bottom: 16px;
	}
	
	.tab-menu>li>span{
		padding-bottom: 4px;
		font-size: 16px;
	}
	
	.tab-item{
		padding-top: 10px;
	}
	
	.tab-item .item-info{
		padding-top: 32px;
	}
	
	.tab-item .item-info>p{
		padding-bottom: 7px;
		font-size: 12px;
	}
	
	.tab-item .item-info>span{
		font-size: 15px;
	}
	
	.tab-item .item-info>span>small{
		font-size: 35px;
	}
	
	.tab-item .item-info>span>i{
		font-size: 30px;
	}
	
	/* contact page */
	
	.contact-inner{
		padding-top: 50px;
	}
	
	.contact-title{
		margin-bottom: 25px;
	}
	
	.contact-title>h3{
		padding-bottom: 12px;
		font-size: 18px;
	}
	
	.contact-title>p{
		font-size: 11px;
	}
	
	.contact-ct.request, .contact-ct.budget{
		margin-top: -15px;
	}
	
	.project:nth-of-type(2){
		margin-top: 45px;
	}
	
	.project>h3{
		margin-bottom: 15px;
		padding-bottom: 15px;
		font-size: 13px;
	}
	
	.form-chk+.form-chk{
		margin-top: 22px;
	}
	
	.form-chk>label{
		padding-left: 22px;
		font-size: 10px;
	}
	
	.form-chk>label:after{
		width: 17px;
		height: 17px;
		border-width: 1px;
	}
	
	.form-chk>div{
		width: calc(100% - 50px);
		margin-top: -9px;
	}
	
	.form-chk input[type="text"]{
		height: 30px;
	}
	
	.form-chk input[type="text"]+input[type="text"]{
		margin-top: 10px;
	}
	
	.form-chk>input[type="text"]{
		width: calc(100% - 50px);
	}
	
	.form-btn{
		margin-top: 15px;
	}
	
	.form-btn>label{
		line-height: 25px;
		border-width: 1px;
		font-size: 10px;
	}
	
	.contact-ct textarea{
		height: 120px;
	}
	
	.form-address{
		margin-top: 20px;
	}
	
	.form-address-inner .form-address{
		width: calc(50% - 10px);
	}
	
	.form-address-inner .form-address:nth-of-type(2){
		margin-left: 20px;
	}
	
	.form-address>label{
		margin-bottom: 10px;
		font-size: 10px;
	}
	
	.form-address>input{
		height: 30px;
	}
	
	.form-submit{
		margin-top: 60px;
		padding: 25px 0;
	}
	
	.form-submit>label{
		padding-left: 12px;
		font-size: 10px;
	}
	
	.form-submit>label:after{
		width: 9px;
		height: 9px;
		border-width: 1px;
	}
	
	.form-submit>div{
		margin-top: 12px;
	}
	
	.form-submit>div>button{
		padding: 0 17px;
		line-height: 32px;
		font-size: 10px;
	}
	
}

/* ------------------------------ */

.parsley-error {
 	border-color: #ffc2c2 !important;
}

.parsley-errors-list {
    list-style-type: none;
    padding: 12px 0px;
    margin: 0px;
}

.parsley-errors-list.filled {
	display: block;
}

.parsley-errors-list li {
	color: #db2929;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}