@charset "UTF-8";
@import "base.css";

* { margin: 0; padding: 0; }
body { background:#e9e9e9; }


/*header*/
#header { position:fixed; top:0; left:0; width:100%; height:70px; z-index:50; padding:0; margin:0; background-color:#fff; }
#headWrap { position: relative; width:960px; padding: 0; margin:0 auto; }
#headWrap #logo { position:absolute; top:10px; left:0; margin:0; padding:0; }
#headWrap #navigation { position: absolute; top:-8px; right:0; padding: 0; margin:0; }
#headWrap #navigation li { float:left; margin-left:10px; padding:0; }
#headWrap #navigation li a { color: #fff; display: block; padding:24px 20px; text-transform: uppercase; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; font-weight:bold; background-color:#70c6d9; }
#headWrap #navigation li.navi01 a { background: -moz-linear-gradient(top, #1481ff, #00c8ff); background: linear-gradient(to top, #1481ff, #00c8ff); background: -webkit-gradient(linear, left top, left bottom, from(#1481ff), to(#00c8ff)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#1481ff, endcolorstr=#00c8ff))";
zoom: 1; }
#headWrap #navigation li.navi02 a { background: -moz-linear-gradient(top, #00737a, #00dbd2); background: linear-gradient(to top, #00737a, #00dbd2); background: -webkit-gradient(linear, left top, left bottom, from(#00737a), to(#00dbd2)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#00737a, endcolorstr=#00dbd2))";
zoom: 1; }
#headWrap #navigation li.navi03 a { background: -moz-linear-gradient(top, #6f36d3, #b392e8); background: linear-gradient(to top, #6f36d3, #b392e8); background: -webkit-gradient(linear, left top, left bottom, from(#6f36d3), to(#b392e8)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#6f36d3, endcolorstr=#b392e8))";
zoom: 1; }
#headWrap #navigation li.navi04 a { background: -moz-linear-gradient(top, #ff3e42, #ffa196); background: linear-gradient(to top, #ff3e42, #ffa196); background: -webkit-gradient(linear, left top, left bottom, from(#ff3e42), to(#ffa196)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ff3e42, endcolorstr=#ffa196))";
zoom: 1; }
#headWrap #navigation li.navi05 a { background: -moz-linear-gradient(top, #f89300, #ffe75f); background: linear-gradient(to top, #f89300, #ffe75f); background: -webkit-gradient(linear, left top, left bottom, from(#f89300), to(#ffe75f)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#f89300, endcolorstr=#ffe75f))";
zoom: 1; }
#headWrap #navigation li a:hover { background: #000; color:#fff; text-decoration:none; }
#home:target ~ #header #headWrap #navigation #link-home { background: #000; color: #39c5e4; font-weight:bold; }
#about:target ~ #header #headWrap #navigation #link-about { background: #000; color: #00aaa7; font-weight:bold; }
#portfolio:target ~ #header #headWrap #navigation #link-portfolio { background: #000; color: #b37fdc; font-weight:bold; }
#recruit:target ~ #header #headWrap #navigation #link-recruit { background: #000; color: #f26c63; font-weight:bold; }
#contact:target ~ #header #headWrap #navigation #link-contact { background: #000; color: #f88d38; font-weight:bold; }
@media(max-width:992px) {
#header { position: absolute; top:0; margin:0; padding:0; height: 64px; padding:0; }
#headWrap { position: relative; width:100%; padding: 0; margin:0; }
#headWrap #logo { position:absolute; left:10px; margin:0; padding:0; }
#headWrap #navigation { position: absolute; top:-8px; right:0; padding-right:0.5em; margin:0; }
#headWrap #navigation li { float:left; margin-left:6px; padding:0; }
#headWrap #navigation li a { color: #fff; display: block; padding:20px 14px; text-transform: uppercase; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; font-weight:bold; }
}
@media(max-width:767px) {
#header { position: absolute; top:0; margin:0; padding:0 0 1em; height: auto; }
#headWrap { position: relative; width:100%; padding: 0; margin:0 auto;}
#headWrap #logo { position: relative; left: auto; margin:0 auto; display:block; }
#headWrap #navigation { position: relative; top: inherit; right: inherit; width:320px; padding: 0; margin:1.6em auto 0; }
#headWrap #navigation li { font-size:12px !important; margin:0 0.5%; text-align:center; display:block; float:left; }
#headWrap #navigation li a, #headWrap #navigation li.active a { padding:1em 0.4em; }
}
#headWrap #navigation:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/*CONTENTS*/
.panel{
    min-width: 100%;
    height: 90%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -150%;
    position: absolute;
    background: #000;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.4);
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
.panel:target { margin-top: 0%; background-color: #3ec8e5; }
.panel.pt1:target { margin-top: 0%; background-color: #39c5e4; }
.panel.pt2:target { margin-top: 0%; background-color: #4bbcb1; }
.panel.pt3:target { margin-top: 0%; background-color: #a9a7d3; }
.panel.pt4:target { margin-top: 0%; background-color: #f4857e; }
.panel.pt5:target { margin-top: 0%; background-color: #f2d972; }

.content { position: absolute; width:960px; right:0; left:0; margin:100px auto 0; padding-bottom: 30px;  }
.content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.content img.icons { position:absolute; right:0; top:-20px; }
.inBox h3 { text-align:center; padding:8px 0; margin:0 0 15px !important; color:#4bbcb1; background-color:#fff; }
.inBox h3.rec { color:#9e86c6; }
.inBox p { margin:0 0 15px !important; text-align:left !important; }
.inBox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
img.logoindex { position: relative; top:0; display:block; margin:0 auto; }
@media(max-width:992px) {
.content { position: absolute; width:90%; right:0; left:0; margin:130px auto 0; padding-bottom: 30px;  }
.content img.icons { position:absolute; right:0; top:-3em;}
img.logoindex { position: relative; top:80px; width:80%; display:block; margin:0 auto; }
}
@media(max-width:767px) {
.content { position: absolute; width:90%; right:0; left:0; margin:130px auto 0; padding-bottom: 30px;  }
.content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.content img.icons { position:absolute; right:0; top:0; width:25%; }
.inBox h3 { text-align:center; padding:8px 0; margin:0 0 15px !important; color:#4bbcb1; background-color:#fff; }
.inBox h3.rec { color:#9e86c6; }
.inBox p { margin:0 0 15px !important; text-align:left !important; }
.inBox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
img.logoindex { position: relative; top:4em; width:100%; display:block; margin:0 auto; }

}


/* OTHERS */
table.company { width:100%; }
table.company th, table.company td { padding:15px; font-size:14px; border:2px solid #d2caf6; }
table.company th { color:#fff; background-color:#9a97cb; width:30%; text-align:center; }
table.company td { color:#333; background-color:#fff;}

table.rec { width:100%; }
table.rec th, table.rec td { padding:15px; font-size:14px; border:2px solid #f9bdb9; }
table.rec th { color:#fff; background-color:#f26c63; width:30%; text-align:center; }
table.rec td { color:#333; background-color:#fff;}



/* FORM */
h2.form, p.form { color:#222; }
dl.inq { margin:0 auto 8px; padding-bottom:8px; border-bottom:1px dotted #000; }
dl.inq dt, dl.inq dd { float:left; color:#222; }
dl.inq dt { width:160px; margin-right:10px; padding:8px 0; font-weight:bold; text-align:left; }
dl.inq dd { width: 270px; float:left; padding:8px 0; }
dl.inq:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
dl.inq dt span { color:#f60; padding-left:10px; }

.comform { margin-top:60px; }
table.formTable{ width:90%; margin:0 auto; border-collapse:collapse; }
table.formTable td,table.formTable th{ border:1px solid #999; padding:10px; }
table.formTable th { width:30%; font-weight:normal; background:#fff; text-align:left; color:#16b4d8; }
table.formTable td { background:#fff; padding-left:10px; }

p.error_messe{ margin:5px 0; color:red; }
.btn-outline2 { margin-top: 20px; padding:5px 20px; border: solid 1px #f60; font-size: 16px; color: #333 !important; background:#fff; transition: all .3s ease-in-out; }
.btn-outline2:hover,
.btn-outline2:focus,
.btn-outline2:active,
.btn-outline2.active { border: solid 1px #f88d00; color: #fff !important; background: #f88d00; }
@media(max-width:767px) {
	dl.inq { width:90%; margin:0 5%; padding-bottom:0.5em;}
	dl.inq dt { width:100%; padding:0.5em 0 0; margin:0; font-weight:bold; color:#333; }
	dl.inq dd { width:100%; text-align:left; }
	dl.inq dt, dl.inq dd { float: none; }
	dl.inq:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
	dl.inq dt span { color:#f60; padding-left:10px; }
	dl.inq dd input, dl.inq dd textarea { width:100%; }
	.mail { padding-top:8em; }
}

#footer { position: fixed; bottom:0; width:100%;  padding:20px 0; margin:0; text-align:center; color:#000; font-size:12px; line-height:16px; }
#footer a { margin-right:30px; color:#000; }
@media(max-width:767px) {
#footer { position: fixed; bottom:0; width:100%; padding:1em 0; margin:0; text-align:center; color:#000; font-size:12px; line-height:16px; }
#footer a { margin-right:30px; color:#000; }
}






.content .workz {
	text-align: center;
}