@viewport {
    orientation: portrait;
}



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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	color: #333;
}



/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	overflow: auto;
	background: #ececec;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {vertical-align: top;}

body {width: 100%; overflow-x: hidden;}
a, a:hover, a:visited, a:link {text-decoration: none;}
::-webkit-input-placeholder {color: #333; font-weight: bold;}
::-moz-placeholder {color: #333; font-weight: bold;}
:-ms-input-placeholder {color: #333; font-weight: bold;}
:-moz-placeholder {color: #333; font-weight: bold;}
:placeholder-shown {color: #333; font-weight: bold;}

.underline {text-decoration: underline !important;}
.showOn {z-index: 5000 !important;;}
.pb50 {padding-bottom: 50px !important;}
.dpnone {display: none !important;}
.b {font-weight: bold;}
#preloader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #333;}
#preloader div {display: block; position: relative; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 50%;
	border: 3px solid transparent; border-top-color: #ececec; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }

#preloader div:before {content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ececec;
	-webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}

#preloader div:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent;
	border-top-color: #ececec; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}

@-webkit-keyframes spin {
	0%   {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg);  transform: rotate(360deg);}
}
@keyframes spin {
    0%   {-webkit-transform: rotate(0deg);  -ms-transform: rotate(0deg);  transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);  -ms-transform: rotate(360deg);  transform: rotate(360deg);}
}



#wrap {width: 100%; max-width: 1024px; overflow: hidden; position: relative; margin: 0 auto;}
.header {width: 100%; height: 50px; position: relative;}
.header h1 {line-height: 50px; text-align: center;}
.header h1 a img {height: 12px; vertical-align: middle;}
.header .openNav {position: absolute; top: 0; right: 20px; line-height: 50px;}
.header .openNav img {height: 18px; vertical-align: middle;}

.headerHolder {height: 50px; overflow: hidden; width: 100%; z-index: 1000; position: fixed;}
.headerHolder .logo {width: 75px; height: 75px; background-size: 75px auto; position: absolute; top: 50%; left: 50%; margin: -38px 0 0 -38px;}
.headerHolder .header {position: absolute; top: 0; left: 0; }

#nav {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index:3000;}
#nav .bg {display: block; width: 100%; height: 100%; position: absolute; background: rgba(0,0,0,.5); top: 0; left: 0;}
#nav .navholder {background: url(/assets/m/images/common/bg_type_logo.gif) -5px -5px repeat; background-size: 31px auto; overflow-y: scroll;
	position: absolute; right: 0%; top: 0; width: 60%; max-width: 340px; height: 100%; box-sizing: border-box; -webkit-box-sizing: border-box;}

#nav .top {height: 70px; position: relative;}
#nav .top .closeNav {position: absolute; right: 15px; bottom: 10px; display: block; width: 20px; height: 20px;}
#nav .top .closeNav img {width: 14px; height: 14px;}
#nav .top .logo {position: absolute; bottom: 17px; height: 12px; left: 20px;}


#nav .mid {border-top: 1px solid #474747; border-bottom: 1px solid #474747; padding: 0 0 30px 20px;}
#nav .mid li {position: relative; margin-top: 30px;}
#nav .mid li span {display: block; height: 2px; width: 40px; position: relative; margin: 10px 0 10px -20px; background: #ffa300;}
#nav .mid li div {}
#nav .mid li h3 {line-height: 14px;}
#nav .mid li div a {display: block; margin-top: 15px;}
/*#nav .mid li a img {height: 14px;}*/

#nav .bottom {padding: 0 0 30px 20px;}
#nav .bottom .company {margin: 30px 0;}
#nav .bottom .company a {color: #ececec; display: block; margin-top: 10px; font-size: 13px;}
#nav .bottom .info {line-height: 22px; font-size: 11px; color: #ececec;}
#nav .navholder img {height: 12px;}
#nav .bottom .info a {color: #ececec;}

#footer {position: relative; background: #ececec; font-size: 13px; padding: 30px 0; }
#footer .top {padding-left: 10px; margin-bottom: 20px;}
#footer .top a {padding: 0 10px; }
#footer .bottom {padding-left: 20px; font-size: 12px; line-height: 20px;}
#footer span {color: #ddd;}



.main {}
.main .front {position: fixed; top: 0; left: 0; width: 100%;}
.main .front .logo {background: url(/assets/m/images/main/p0_1.png) no-repeat; width: 75px; height: 75px; background-size: 75px auto;
	position: absolute; top: 50%; left: 50%; margin: -38px 0 0 -38px;}
.main .front .header {position: absolute; top: 0; left: 0; }
.main .cont {position: relative;}
.main .cont .pages {padding-top: 50px; border-bottom: 2px solid #ddd; background: #ececec;}
.main .cont .pages .copy {width: 100%; overflow: hidden;}
.main .cont .pages .copy img {width: 110%; max-width: 640px;}
.main .cont .pages .text {font-size: 12px; margin: 25px 0 30px 20px; line-height: 20px;}
.main .cont .pages .concept {position: relative;}
.main .cont .pages .concept .device {position: absolute; top: 0;}
.main .cont .pages .concept img {width: 100%;}
.main .cont .pages .concept span {display: block; position: absolute; top: 0; left: 0; width: 100%: height: 100%; background: rgba(0,0,0,0);}
.main .req {padding: 0 20px;}

.sub {}
.sub .headerHolder {}
.sub .headerHolder .bg {height: 50px; position: relative;}
.sub .headerHolder .bg div {height: 50px; width: 1024px; position: absolute; top:0; background: url(/assets/m/images/common/bg_type_logo.gif) 0 0 repeat; left: -45%;}
.wide .sub .headerHolder .bg div {left: 0;}
.req {}
.req .inputHolder {}
.req .inputHolder li {position: relative; height: 30px; padding-left: 40px; background: #fff; border: 1px solid #ddd; margin-top: 10px;}
.req .inputHolder li input {background: none; border: 0; line-height: 25px; padding: 0; display: block; width: 100%; color: #333; font-weight: bold; margin-top: 2px;}
.req .inputHolder li span {background: url(/assets/m/images/common/req_bg_input.png) no-repeat; display: block; width:15px; height: 15px;
	position: absolute; top: 50%; left: 18px; margin-top: -8px;}
.req .inputHolder li:nth-of-type(1) {margin-top: 0;}
.req .inputHolder li:nth-of-type(1) span {background-position: 0 0;}
.req .inputHolder li:nth-of-type(2) span {background-position: 0 -15px;}
.req .inputHolder li:nth-of-type(3) span {background-position: 0 -30px;}
.req .inputHolder li:nth-of-type(4) span {background-position: 0 -45px;}
.req .inputHolder li:nth-of-type(5) {height: auto;}
.req .inputHolder li:nth-of-type(5) span {background-position: 0 -60px; top: 15px;}
.req .inputHolder li:nth-of-type(5) textarea {background: none; border: 0; width: 100%; height: 100px; color: #333; font-weight: bold; margin-top: 5px;}
.req .inputHolder .submit {height: 30px; text-align: center; background: #ffa300; display: block; margin-top: 50px;}
.req .inputHolder .submit a {display: block; width: 100%; height: 100%; color: #fff; font-weight: bold; line-height: 30px;}

.sub {background: #ececec;}
.sub .cont {padding: 80px 0 0 0;}
.sub .cont .title {margin-bottom: 30px;}
.sub .cont .title img {width: 100%; max-width: 640px;}
.sub .cont .pagination {overflow: hidden; text-align: center; margin-bottom: 30px; padding: 0 20px;}
.sub .cont .pagination a {line-height: 30px; width: 48%; font-size: 14px; border-radius: 20px; border: 1px solid #333; display: block; float: right;}
.sub .cont .pagination a:first-child {float: left;}
.sub .cont .pagination a.active {background: #333; color: #ececec;}


.sub .business .pageholder ul {padding:20px 18% 30px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.sub .business .pageholder ul li {margin-top: 10px;}
.sub .business .pageholder ul li a {width: 100%; display: block;}
.sub .business .pageholder ul li a img {width: 100%;}

.about {}
.about .cont .pages {}
.about .cont .page0 {}
.about .cont .page0 ul {border-top: 1px solid #ddd;}
.about .cont .page0 ul li {padding: 0 0 1px 0; border-bottom: 1px solid #ddd; position: relative;}
.about .cont .page0 ul li img {width: 100%; display: block;}
.about .cont .page0 ul li .cover {position: absolute; top: 0; left: 0;}
.about .cont .page0 ul li .swipeArea {position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0);}

.list {}
.list .pageholder {}
.list .pageholder ul {border-top: 1px solid #ddd;}
.list .pageholder ul li {border-bottom: 1px solid #ddd; overflow: hidden; position: relative; opacity: 0;}
.list .pageholder ul li .thumb {display: box; display: -webkit-box; width: 90px; height: 90px; float: left;}
.list .pageholder ul li .thumb img {width: 90px; height: 90px;}
.list .pageholder ul li a {display: block; width: 100%; height: 100%; top: 0; left: 0; position: absolute;}
.list .pageholder ul li .info {position: relative; padding: 10px 0 10px 10px;}
.portfolio.list .pageholder ul li .info {margin: 5px 0 0 90px;}
.list .pageholder ul li .info h5 {font-weight: bold; font-size: 15px; line-height: 18px; display: block; margin-bottom: 20px;}
.list .pageholder ul li .info div {overflow: hidden;}
.list .pageholder ul li .info div span {font-size: 12px; display: block; float: left;}
.list .pageholder ul li .info div span:first-child {margin-right: 10px; padding-right: 10px; border-right: 1px solid #333;}
.list .btnAddList {text-align: center; margin-top: 20px;}
.list .btnAddList a img {height: 40px;}
.sub .list .pagination {margin-bottom: 20px;}
.sub .list .pagination a {float: left;width: 85px;font-size: 12px;margin: 0 0 5px 5px;}

#details {position: fixed;; top: 0; left: 0; width: 100%; height: 100%; background: url(/assets/m/images/common/bg_type_logo.gif) -40px -40px repeat;
	z-index: 4000; transform: translate(100%, 0);}
#details * {color: #fff;}
#details .top {background: url(/assets/m/images/common/detail_logo.png) center center no-repeat; background-size: auto 32px; position: relative; height: 50px;}
#details .top .btnGoList {display: block; position: absolute; width: 20px; height: 20px; left: 20px; top: 50%; margin-top: -10px;}
#details .top .btnGoList img {width: 20px;}
#details .contents {overflow-y: scroll;}
#details .contents .scroller {overflow-y: auto;}
#details .contents iframe {display: block; width: 100%; height: 200px;}
#details .contents h4 {padding: 20px; font-size: 15px; line-height: 20px;}
#details .contents .devide {width: 40px; height: 2px; background: #ffa300; display: block;}
#details .contents .info {padding: 20px; overflow: hidden;}
#details .contents .info li {font-size: 12px; display: block; float: left;}
#details .contents .info li:first-child {border-right: 1px solid #fff; margin-right: 10px; padding-right: 10px;}
#details .contents .texts {font-size: 13px; line-height: 18px; padding: 0 20px 20px;}

.request .pageholder {padding-bottom: 30px; border-bottom: 1px solid #ddd;}
.request .visual {margin-bottom: 20px; padding: 0 20px;}
.request .visual img {width: 100%;}
.request .texts {padding:0 20px; font-size: 13px; line-height: 18px; margin-bottom: 20px;}
.request .inputHolder {padding: 0 20px;}
.request .inputHolder .submit {margin-top: 10px;}
.request .inputHolder .submit a {font-size: 13px;}

.map {padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.map .visual {}
.map .visual img {width: 100%;}
.map .texts {padding: 0 20px;}
.map .texts .top {margin: 20px 0 15px;}
.map .texts li {position: relative; padding-left: 60px; font-size: 13px; margin-top: 5px;}
.map .texts li span {position: absolute; top: 0; left: 0; font-size: 13px;}
.map .submit {text-align: center; height: 35px; margin-top: 20px; padding-bottom: 20px;}
.map .submit a {background: #ffa300; color: #fff; line-height: 35px; height: 35px; font-size: 13px; display: block;}

.recruit {}
.recruit .pageholder {padding: 20px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.recruit .pageholder h6 {font-weight: bold; font-size: 13px; margin-bottom: 10px;}
.recruit .subscrpt {margin-bottom: 20px;}
.recruit .texts div {line-height: 20px;}
.recruit .texts div img {width: 100%; max-width: 540px; display: block; margin: 0 auto;}
.recruit .texts li {margin-top: 25px;}
.recruit .texts li:first-child {margin-top: 0;}
.recruit * {font-size: 13px; line-height: 18px;}
.recruit .submit {text-align: center; height: 35px;}
.recruit .submit a {background: #ffa300; color: #fff; line-height: 35px; height: 35px; font-size: 13px; display: block;}

.termHolder {padding: 0 20px 20px; font-size: 12px; line-height: 18px; border-bottom: 1px solid #ddd;}
.termHolder h4 {font-size: 15px; margin-bottom: 15px; font-weight: bold;}




/*  */