@import url('https://fonts.googleapis.com/css?family=Poiret+One|Merriweather+Sans|Ubuntu|Didact+Gothic');
@import url('./font-awesome.css');


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ul {padding: 0; margin: 0 auto;}
body {
    line-height:1;
	font-family: 'Merriweather Sans', sans-serif;
	/*
	font-family: 'Merriweather Sans', sans-serif;
	font-family: 'Poiret One', cursive;
	font-family: 'Ubuntu', sans-serif;
	font-family: 'Didact Gothic', sans-serif;
	*/
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
	color: #000;
	outline: none;
}

*:focus {outline: none;}





/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*	main	*/
.head_nav {border-bottom: 2px solid #b1c904; height: 80px; width: 100%; position:fixed; background: #fff; z-index: 100;}
.head_nav .wrap {height:55px; margin:0 auto; margin-top: 20px; position:relative; width:960px;}
.head_nav .wrap .logo a img {height: 55px;}
.head_nav .wrap nav, .head_nav .wrap div {display:inline-block; vertical-align:top;}
.head_nav .wrap nav, .head_nav.main .wrap {padding-left: 17px;}

.head_nav .wrap nav {float: right;}
.head_nav .wrap nav ul.main_nav_wrap li {display:inline-block; padding: 0 7px 15px 7px; margin-top: 20px; font-size: 17px; font-weight:bold;
font-family: 'Poiret One', cursive;}
.head_nav .wrap nav ul.main_nav_wrap li.main_nav {padding-left: 30px;}
.head_nav .wrap nav ul.main_nav_wrap li.main_nav i {font-size: 13px;}
.head_nav .wrap nav ul.main_nav_wrap li.main_nav:hover i {color: #ccc}
.head_nav .wrap nav ul.main_nav_wrap li.bar {color: #ddd; padding: 0 0 15px 0; font-weight:normal !important; cursor: default !important;}
.head_nav .wrap nav ul.main_nav_wrap li:hover {font-weight: normal; cursor:pointer;}
.head_nav .wrap div.aside_menu {float: right;}

.sub_nav_wrap {position:fixed; width: 100%; background: #fff; left: 0; top: -200px; border-bottom: 1px solid #ccc; z-index: 10;}
.sub_nav_wrap .sub_nav {width: 960px; list-style:none;}
.sub_nav_wrap .sub_nav li {width: 120px; height: 110px; vertical-align:top; padding: 0; margin: 0 0 0 -5px; background: #fff; text-align:center; display:inline-block;}
.sub_nav_wrap .sub_nav li div {font-family: 'Didact Gothic', sans-serif; font-weight:normal; font-size: 14px;width: 120px;}
.sub_nav_wrap .sub_nav li img {width: 60px; margin-top: 17px; }
.sub_nav_wrap .sub_nav li:hover {background: #eee; cursor:pointer;}

.main_contents {z-index:0; width: 100%; position:absolute; margin-top: 75px;}
.main_contents #slides {width: 100%;}
.main_contents #slides li {height: 500px; background-size: cover !important;}
.main_contents #slides li:nth-child(1) {background: url('../img/img_bg_01.jpg') no-repeat;}
.main_contents #slides li:nth-child(2) {background: url('../img/img_bg_02.jpg') no-repeat;}
.main_contents #slides li:nth-child(3) {background: url('../img/img_bg_03.jpg') no-repeat;}
.main_contents #slides li:nth-child(4) {background: url('../img/img_bg_04.jpg') no-repeat;}
.main_contents #slides li:nth-child(5) {background: url('../img/img_bg_05.jpg') no-repeat;}
.main_contents #slides li:nth-child(6) {background: url('../img/img_bg_06.jpg') no-repeat;}
.main_contents .wrap {z-index:15; width: 1000px; margin:0 auto; position:relative; }
.main_contents .wrap > div.request_box {position:absolute; margin-top: -270px; right: 10px; padding: 20px 50px; background: #fff; font-family: 'Merriweather Sans', sans-serif; text-align:center; font-size: 17px; border: 1px solid #555; border-bottom: 5px solid #555;}
.main_contents .wrap > div.request_box:hover {border-bottom: 3px solid #555; margin-top: -268px; cursor:pointer;}
.main_contents .wrap > div.contents_list {text-align:center;}
.main_contents .wrap > div.contents_list ul {list-style:none; display:inline-block; margin-left: 15px; vertical-align:top;}
.main_contents .wrap > div.contents_list ul .list_name {margin-top: 20px; margin-bottom: -10px; color: #555; padding: 10px 0;}
.main_contents .wrap > div.contents_list ul:nth-child(1) {margin-left: 0;}
.main_contents .wrap > div.contents_list ul li {border:1px solid #ccc; margin: 10px 10px 30px 0; height: 295px; width: 220px;}
.main_contents .wrap > div.contents_list ul li > img {width: 220px;}
.main_contents .wrap > div.contents_list ul li > .desc_wrap {background: #fff; height: 72px; position:relative; transition: all 0.3s ease; border-top: 1px solid #ccc; overflow: hidden; margin-top: -2px;}
.main_contents .wrap > div.contents_list ul li > .desc_wrap:hover {height: 180px; margin-top: -110px; transition: all 0.3s ease}
.main_contents .wrap > div.contents_list ul li > .desc_wrap:hover .description {overflow-y: auto;}
.main_contents .wrap > div.contents_list ul li > .desc_wrap .title {padding: 5px 0 5px 5px; font-size: 15px; text-align:left;}
.main_contents .wrap > div.contents_list ul.marketing li > .desc_wrap .title font {color: #f33d88;}
.main_contents .wrap > div.contents_list ul.design li > .desc_wrap .title font {color: #75af04;}
.main_contents .wrap > div.contents_list ul.programing li > .desc_wrap .title font {color: #009adc;}
.main_contents .wrap > div.contents_list ul li > .desc_wrap .description {height: 150px; text-align:left; font-size: 14px; line-height: 15px; padding: 0px 5px 0 5px; font-family: 'Didact Gothic', sans-serif;}
.goit_c1 {color: #f33d88} 
.goit_c2 {color: #75af04} 
.goit_c3 {color: #009adc} 


footer {width: 100%; margin-top: 50px; height: 100px;}
footer .footer {width: 1000px; margin: 0 auto; border-top: 1px solid #555; font-size: 11px; color: #444}
footer .footer > div {display:inline-block;}
footer .footer .copyright {margin: 15px auto; padding-left: 10px; }
footer .footer .copyright p {text-align:center; margin-top: 8px;}
footer .footer .social {float: right; padding-right: 10px; margin: 18px auto; font-size: 25px;}
footer .footer .social .fa-facebook-official {color: #4867aa}
footer .footer .social .fa-twitter-square{color: #1da1f2}
footer .footer .social .fa-google-plus-square{color: #db4437}

#slides .slidesjs-control, #slides .slidesjs-container {height: 500px;}
/*	//main	*/

/*	partner	*/

.main_contents.sub {margin-top: 100px;}
.main_contents.sub .wrap {border: 1px solid #ddd;}
.main_contents.sub .wrap .title {border-bottom: 1px solid #ddd}
.main_contents.sub .wrap .title > div {display:inline-block; vertical-align:top;}
.main_contents.sub .wrap .title .t_l {font-family: 'Ubuntu', sans-serif; font-weight:bold; font-size: 35px; width: 40%; text-align:center; margin-top: 45px; border-right: 1px solid #ccc}
.main_contents.sub .wrap .title .t_l.cs {margin-top: 35px;}
.main_contents.sub .wrap .title .t_r {font-size: 12px; line-height: 20px; padding: 20px 0 20px 40px; width: 55%;}
.main_contents.sub .wrap .title .t_r b {font-family: 'Ubuntu', sans-serif; font-size: 15px;}
.main_contents.sub .wrap .contents {margin: 15px auto; padding: 30px 0 40px 0; border-bottom: 1px solid #ddd}
.main_contents.sub .wrap .contents:last-child {border: none;}
.main_contents.sub .wrap .contents .con_title {font-family: 'Ubuntu', sans-serif; font-size: 22px; padding-left: 10px;}
.main_contents.sub .wrap .contents > div {font-size: 12px; margin: 10px auto; line-height: 20px; padding-left: 20px;}
	
.main_contents.sub .wrap .contents div.partner_request_box {position: absolute; background: #009adc; color: #fff; font-family: 'Merriweather Sans', sans-serif; text-align:center; border: 1px solid #0b5c7e; border-bottom: 5px solid #0b5c7e; width: 250px; right: 10px; margin-top: -90px !important; font-size: 20px !important; padding: 20px 50px !important;}
.main_contents.sub .wrap .contents div.partner_request_box:hover {border-bottom: 3px solid #0b5c7e; cursor:pointer; margin-top: -88px !important; }


.partner_slide .slidesjs-control, .partner_slide .slidesjs-container {height: 380px;}
.partner_slide {list-style:none; padding: 0; text-align:center;}


.propposal_register {border-top: 1px dashed #ccc; display:none;}
.propposal_register div.inquiry_btn {background: #fff; color: #444; font-family: 'Merriweather Sans', sans-serif; text-align:center; border: 1px solid #444; border-bottom: 5px solid #444; width: 250px; font-size: 20px !important; padding: 10px 30px !important; margin: 30px auto; cursor:pointer; transition: all 0.3s ease;}
.propposal_register div.inquiry_btn:hover {background: #555; color: #fff; border-bottom: 5px solid #000; transition: all 0.3s ease}



/*	//partner	*/


/*	cs	*/

.main_contents .wrap .contents.input_wrap > ul {list-style:none; padding: 0; width: 100%; text-align:center;}
.contents.input_wrap > ul > li {display:inline-block; border: 1px solid #ccc; width: 47%; padding: 10px 0; cursor:pointer; border-bottom: 3px solid #ccc}
.main_contents .wrap .contents.input_wrap .con_title {color: #ccc}
.main_contents .wrap .contents.input_wrap .con_title.active {color: #000; border: 1px solid #000; border-bottom: 3px solid #444}
.main_contents .wrap .contents.input_wrap .con_title i {position:absolute; margin-left: 10px; color: #da6484}
.main_contents .wrap .contents.input_wrap .cs_input.per {display:none;}
.main_contents .wrap .contents.input_wrap .cs_input {border-top: 1px dashed #ccc; padding-top: 20px; }

.input__label-content--chisato.name::after {content: "\f2bd" attr(data-content);}
.input__label-content--chisato.c_name::after {content: "\f19c" attr(data-content);}
.input__label-content--chisato.email::after {content: "\f2b6" attr(data-content);}
.input__label-content--chisato.call::after {content: "\f098" attr(data-content);}
.input__label-content--chisato.desc::after {content: "\f14b" attr(data-content);}
.input__label-content--chisato.file::after {content: "\f0ee" attr(data-content);}
.input__field.input__field--chisato.desc {height: 200px;}

.main_contents .wrap .contents.input_wrap .cs_input div.inquiry_btn {background: #fff; color: #444; font-family: 'Merriweather Sans', sans-serif; text-align:center; border: 1px solid #444; border-bottom: 5px solid #444; width: 250px; font-size: 20px; padding: 10px 30px; margin: 30px auto; cursor:pointer; transition: all 0.3s ease}
.main_contents .wrap .contents.input_wrap .cs_input div.inquiry_btn:hover {background: #555; color: #fff; border-bottom: 5px solid #000; transition: all 0.3s ease}


/*	//cs	*/


/*	contact	*/
		.contact { font-family: 'Ubuntu', sans-serif; font-size: 25px !important; }
		.contact span {margin-right: 40px; cursor:pointer;}		
		.contact span:nth-child(2) {color: #4867aa}
		.contact span:nth-child(3) {color: #1da1f2}
		.contact span:nth-child(4) {color: #db4437}

/*	//contact	*/


/*	//input	*/
.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 1em;
	/*
	width: calc(100% - 2em);
	*/
	width: 910px;
	vertical-align: top;
	font-family: 'Merriweather Sans', sans-serif;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;
	background: #f0f0f0;
	color: #aaa;
	font-weight: 400;
	font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	float: right;
	padding: 0 1em;
	color: #696969;
	font-size: 110%;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
}


.input--chisato {
	/*
	padding-top: 1.5em;
	*/
	margin-top: 20px;
}

.input__field--chisato {
	width: 100%;
	padding: 1em 0.5em;
	background: transparent;
	border: 1px solid;
	color: #b5b5b5;
	-webkit-transition: border-color 0.25s;
	transition: border-color 0.25s;
}

.input__label--chisato {
	margin-left: -15px;
	margin-top: -25px;
	width: 100%;
	position: absolute;
	top: 0;
	text-align: left;
	overflow: hidden;
	padding: 0;
	pointer-events: none;
	-webkit-transform: translate3d(0, 3em, 0);
	transform: translate3d(0, 3em, 0);
	height: 30px;
}

.input__label-content--chisato {
	padding: 0 1em;
	font-weight: 400;
	color: #b5b5b5;
}

.input__label-content--chisato::after {
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: -170%;
	left: 0;
	color: #da6484;
	font-weight: 800;
}


.input__field--chisato:focus,
.input--filled .input__field--chisato {
	border-color: #da6484;
}

.input__field--chisato:focus + .input__label--chisato,
.input--filled .input__label--chisato {
	-webkit-animation: anim-chisato-1 0.25s forwards;
	animation: anim-chisato-1 0.25s forwards;
}

.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
.input--filled .input__label-content--chisato {
	-webkit-animation: anim-chisato-2 0.25s forwards ease-in;
	animation: anim-chisato-2 0.25s forwards ease-in;
}

@-webkit-keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}

@keyframes anim-chisato-1 {
	0%, 70% {
		-webkit-transform: translate3d(0, 3em, 0);
		transform: translate3d(0, 3em, 0);
	}
	71%, 100% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes anim-chisato-2 {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	70%, 71% {
		-webkit-transform: translate3d(0, 125%, 0);
		transform: translate3d(0, 125%, 0);
		opacity: 0;
		-webkit-animation-timing-function: ease-out;
	}
	100% {
		color: transparent;
		-webkit-transform: translate3d(0, 200%, 0);
		transform: translate3d(0, 200%, 0);
	}
}



/*	//input	*/