@charset "utf-8";
/* 
	Project Doge ~ Core Style Sheet. / (C)2010-2014 Nagi Akiba / (C)2014 Yui Gu
*/

/* Global Element */
body { font-size: 12px; font-weight: normal; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Microsoft Yahei", YouYuan, sans-serif; background: #FFF !important; }
.container { max-width: 1080px; margin-right: auto; margin-left: auto }
.btn { padding: 8px 15px; cursor: pointer }
.btn:active { outline: none }
a { color: #51ACEB }
a:hover { text-decoration: none }
h4 a { color: #333 }
.gotop, .gotop-default { padding-top: 20px; text-align: center }
.gotop { display: none }
.goback { border-top: 1px solid #CCC; padding-top: 20px; margin-top: 30px }
.zoomer { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; background: #333 url(../img/comm/zoomer.png) center center no-repeat; opacity: .3; }

/* Global Structure */
/* - Header */
header { position: relative }
header nav .target { float: right; width: 700px }
header nav .mlogo { display: block; height: 80px; width: 176px; line-height: 80px; position: relative; }
header nav .mlogo i { position: absolute; top: 15px; right: -5px; display: block; line-height: 100%; font-size: 12px; font-weight: bolder; color: #666; }
header nav .nav { float: right }
header nav .nav .open > a, .nav .open > a:focus { border-bottom: 5px solid #019EEB; background: none!important }
header nav .nav li.reg { padding: 0 10px 0 20px; line-height: 80px }
header nav .nav li a { padding: 0 20px; color: #888; font-size: 14px; background: none; line-height: 80px; }
header nav .nav li a:hover, header nav .nav li a:focus { color: #333; border-bottom: 2px solid #019EEB; background: none }
header .navbg { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background-color: #F5F5F5; border-bottom: 1px solid #DDD; z-index: 1020; -webkit-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); filter: alpha(opacity=97); -moz-opacity: 0.97; opacity: 0.97; }
html header nav .nav .select a { color: #000 }
@media screen and (max-width:990px) { 
    header nav .nav li a { padding: 0 12px }
    header nav .nav li.reg { padding: 0 5px 0 10px; line-height: 80px }
}
@media screen and (max-width:990px) and (min-width:768px) { 
    header nav .target { float: right; width: 500px }
}
@media screen and (max-width:768px) { 
    header nav .container { padding: 0 }
    header nav .container .navbar-header { margin: 0 }
    header nav .navbar-collapse { left: 0; padding: 0 }
    header nav .mlogo { height: 60px; margin-left: 3%; line-height: 60px; width: 132px; }
    header nav .mlogo img { height: 42px; margin-top: -1px }
	header nav .mlogo i { position: absolute; top: 10px; right: -3px; display: block; line-height: 100%; font-size: 11px; font-weight: bolder; color: #666; }
    header nav .target { float: right; width: 100% }
    header nav .navbar-toggle { width: 38px; height: 38px; margin: 10px 3% 0; background-image: url(../img/comm/menu.gif); background-position: center center; background-repeat: no-repeat; }
    header nav .nav { float: none; margin: 0 }
    header nav .nav li a:hover, header nav .nav li a:focus { background-color: #555; color: #FFF; border-bottom: 1px solid #666 }
    header nav .navbar-nav { margin-top: 0px }
    header nav .navbar-nav li.reg { text-align: center }
    header nav .navbar-nav li { background-color: #333; filter: alpha(opacity=96); -moz-opacity: 0.96; opacity: 0.96; }
    header nav .navbar-nav li a { color: #FFF; border-bottom: 1px solid #666; font-size: 16px; text-align: center; line-height: 45px }
    header .navbg { height: 60px }
    .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 1000px; margin-right: auto; margin-left: auto }
}
/* - Footer */
.footer { margin-top: 60px; color: #BCBCBC; font-size: 14px; background: #333 }
.footer .copyright { float: right }
.footer .copyright .icp { display: block; color: #FFF; text-align: right }
.footer .container { padding: 25px 0 }
.footer .footnav { float: left }
.footer .footnav a { padding: 0 10px; color: #FFF }
@media screen and (max-width:990px) { 
    .footer .footnav { margin-bottom: 5px }
    .footer .footnav, .footer .copyright, .footer .copyright .icp { float: none; text-align: center }
}
/* - Default templates */
.page-banner { position: relative; width: 100%; margin-bottom: 40px; padding: 80px 0 0; overflow: hidden }
.page-banner .masker-bg, .page-banner .masker { position: absolute; top: 0px; right: 0; bottom: 0; left: 0px }
.page-banner .masker-bg { background: url(../img/default/page-banner-default.jpg) center top no-repeat fixed; z-index: -2; }
.page-banner .masker { background-color: #0079B3; opacity: .75; z-index: -1; }
html .page-solutions .masker-bg { background-image: url(../img/solution/page-banner-solution.jpg) }
html .page-case .masker-bg { background-image: url(../img/case/page-banner-case.jpg); }
html .page-news .masker-bg { background-image: url(../img/news/page-banner-news.jpg);  }
html .page-contact .masker-bg { background-image: url(../img/default/page-banner-contact.jpg) }
.page-banner h2 { margin: 0 auto; padding: 50px 0; color: white; font-weight: normal }
.page-content .sidebar { float: left; width: 23%; padding-right: 2% }
.page-content .sidebar ul { margin-left: 18px; list-style: disc }
.page-content .sidebar li { padding: 5px 0; font-size: 14px }
.page-content .sidebar h4 { margin-top: 0; padding-top: 0; color: #555; font-size: 18px }
.page-content .content { float: right; width: 75%; min-height: 550px; font-size: 14px }
.page-content .content .dogeholder { color: #888; font-size: 14px; line-height: 1.75 }
.page-content .content .dogeholder section { margin-bottom: 30px }
.page-content .content .dogeholder center { margin-bottom: 20px; text-align: center }
.page-content .content .dogeholder img { max-width: 100% }
.page-content .content .dogeholder ul { margin-left: 20px; list-style: disc }
.page-content .content .dogeholder li { padding: 3px 0 }
.page-content .content .dogeholder ul li ol { margin-left: 20px; list-style: decimal; }
.page-content .content .dogeholder p { margin-bottom: 20px; text-indent: 28px }
.page-content .content .newsinfo { margin-bottom: 10px; color: #AAA }
.page-content .content .newsinfo span { margin-right: 15px }
.page-content .content .tags { margin-top: 20px; color: #AAA }
.page-content .content .tags a { margin: 0 4px }
.page-content .content h4 { margin: 0 0 10px; padding: 0; color: #333; font-weight: normal }
.page-content .content h3 { margin: 0 0 10px; padding: 0; color: #555; font-size: 22px; font-weight: normal }
html .page-content .default { float: none; width: 100% }
html .page-content .solutionlist ul { margin-left: 0; list-style: none }
html .page-content .solutionlist li { padding: 7px 0; border-bottom: 1px dashed #CCC; font-size: 16px }
@media screen and (max-width:990px) { 
    .page-content .content { min-height: 300px }
    .page-content .sidebar { margin-top: 30px }
    .page-content .sidebar, .page-content .content { float: none; width: 100%; padding-bottom: 30px; border-bottom: 1px solid #CCC }
    .page-content .gotop { display: block }
    html .page-content .solutionlist li { border-bottom: none; text-align: center }
}
@media screen and (max-width:768px) { 
    .page-banner { padding-top: 60px }
}

/* Page Structure */
/* - Index & Product Banner */
.banner { padding: 120px 0 60px }
.banner .slider-bg { width: 100%; z-index: 10 }
.banner .righter { position: relative; float: right; width: 730px }
.banner .slider { position: absolute; top: 0; left: 0; width: 100%; z-index: 100 }
.banner .slider .fk-slider { width: 87.8%; margin: 2% auto 0 }
.banner .slider .fk-slider .carousel-indicators { bottom: -29px }
.banner .slider .fk-slider .carousel-indicators li.active { width: 10px; height: 10px }
.banner .slider .fk-slider .carousel-indicators li { width: 8px; height: 8px }
.banner .slider .fk-slider .carousel-inner { overflow: hidden }
.banner .slider img { width: 100% }
.banner .viewthumb { position: relative; display: block; }
.banner .viewthumb:hover .zoomer { display: block }
.banner .lefter { float: left; width: 310px; margin-top: 15px }
.banner .lefter .btn--download { width: 200px; height: 70px; margin-top: 35px; padding: 12px 16px; font-size: 18px; text-align: left; background-image: url(../img/index/down.png); background-position: 150px center; background-repeat: no-repeat; }
.banner .lefter .btn--download i { display: block; font-size: 12px; font-style: normal; line-height: 2 }
.banner .lefter .more { display: block; margin-top: 30px; font-size: 16px }
.banner .lefter h1 { margin-bottom: 40px }
.banner .lefter p { color: #AAA; font-size: 16px; line-height: 1.25 }
.product { position: relative; width: 100% }
.product .banner .lefter p, .product .banner .lefter h1, .product .banner .lefter h2 { color: #FFF }
.product .masker-bg, .product .masker { position: absolute; top: 0px; right: 0; bottom: 0; left: 0px }
.product .masker-bg { background: url(../img/product/prd-bg.jpg) right center fixed; z-index: -2; }
.product .masker { background-color: #000; opacity: .6; z-index: -1; }
@media screen and (max-width:1200px) { 
    .banner { padding: 100px 0 60px }
    .banner .righter { float: none; min-width: 300px; width: auto; max-width: 730px; margin: 0 auto; text-align: center }
    .banner .lefter { float: none; width: 100%; margin: 0 auto; text-align: center }
    .banner .lefter .btn--download { margin-top: 20px }
    .banner .lefter .more { text-align: center }
    .banner .lefter h1 { margin-bottom: 30px }
    .banner .lefter h1, .banner .lefter h2, .banner .lefter p { text-align: center }
    .banner .aria2 { margin-top: 30px }
}
@media screen and (max-width:990px) { 
    .banner .lefter { float: none; margin-right: auto; margin-left: auto; text-align: center }
    .banner .lefter .btn-blue { margin-right: auto; margin-left: auto; text-align: left }
}
@media screen and (max-width:768px) { 
    .banner { padding-top: 80px }
    .banner .slider .fk-slider .carousel-indicators { display: none }
    .banner .lefter h1 { font-size: 28px; font-weight: normal }
    .banner .lefter h2 { font-size: 22px; font-weight: normal }
}
/* Index - Introduction */
.introduction { width: 100%; padding: 30px 0; background-color: #51ACEC }
.introduction ul { list-style: none }
.introduction li { float: left; width: 25%; text-align: center }
.introduction li span { display: block; padding-top: 10px; color: #FFF; font-size: 16px; text-align: center }
@media screen and (max-width:990px) { 
    .introduction li span { font-size: 14px }
}
@media screen and (max-width:768px) { 
    .introduction { padding-bottom: 0px }
    .introduction li { width: 50%; margin-bottom: 30px }
}
/* Index - Story */
.story { margin: 20px 0 }
.story li { float: left; width: 31.3%; margin: 1% }
.story li .thirdchid { display: none }
.story li .viewthumb { position: relative; display: block; max-width: 320px; margin-bottom: 10px }
.story li .viewthumb:hover .zoomer { display: block }
.story li .more { font-size: 14px }
.story li img { max-width: 100% }
.story li p { min-height: 40px; color: #AAA; font-size: 14px }
@media screen and (max-width:990px) { 
    .story .story-contant { float: none; margin-right: auto; margin-left: auto }
    .story .story-contant img { width: 100% }
    .story li { width: auto; margin: 0; text-align: center }
    .story li .thirdchid { display: block }
    .story li p { min-height: 0 }
    .story li p, .story li h4 { text-align: center }
    .story .col-1 { width: 46%; margin: 2% }
    .story .col-1 .viewthumb { margin: 0 auto 10px }
    .story .col-2 { width: 98%; margin: 2% }
    .story .col-2 .viewthumb { float: left; width: 31.3%; margin: 0 1% 10px }
    .story .col-2 .more { text-align: center; clear: both }
}
@media screen and (max-width:768px) { 
    .story ul li { width: 100% !important; margin: 0px !important; padding: 20px 0 }
    .story .col-1 { border-bottom: 1px solid #EEE }
    .story ul li .viewthumb, .story .col-1 .viewthumb, .story .col-2 .viewthumb { float: none; width: auto; margin: auto auto 10px; }
}
/* Index - Feedback */
.feedback { position: relative; width: 100%; margin-top: 40px; padding: 50px 0 40px; overflow: hidden }
.feedback .masker-bg, .feedback .masker { position: absolute; top: 0px; right: 0; bottom: 0; left: 0px }
.feedback .masker-bg { background: url(../img/index/feedback/feedback-bg.jpg) center center no-repeat fixed; z-index: -2; }
.feedback .usr-logo { float: right; width: 20%; text-align: left; /*border-left: 1px solid #C9E1ED;*/ padding-left: 4% ; }
.feedback .awords { float: left; width: 76% }
.feedback .awords .sign { font-size: 16px; text-align: right }
.feedback .awords p { display: block; float: left; width: 100%; color: #fff; font-size: 20px }
.feedback .awords b { display: block; float: left; margin-right: 10px; color: #FFF; font-size: 72px; font-family: Arial; line-height: 30px; }
.feedback .masker { background-color: #0079B3; opacity: .6; z-index: -1; }
@media screen and (max-width:990px) { 
    .feedback { padding-bottom: 50px }
    .feedback .usr-logo { display: none; float: none; width: 100%; height: auto; border-left: none; text-align: left; line-height: normal }
    .feedback .awords { float: none; width: 100% }
}
@media screen and (max-width:768px) { 
    .feedback .container { padding: 0 30px }
}
/* Index - News */
.news { margin: 20px 0 }
.news li { float: left; width: 31.3%; margin: 1% }
.news li .more { font-size: 14px }
.news li img { display: block; max-width: 100%; margin-bottom: 10px }
.news li h4 { line-height: 1.2 }
.news li p { min-height: 40px; color: #AAA; font-size: 14px }
.news h3 { text-align: center }
@media screen and (max-width:990px) { 
    .news .story-contant { float: none; margin-right: auto; margin-left: auto }
    .news .story-contant img { width: 100% }
    .news li { width: 31.3%; margin: 0 1% 10px }
    .news li h5 { text-align: center }
    .news li p, .news li h4 { text-align: left }
}
@media screen and (max-width:768px) { 
    .news ul li { width: 100% !important; margin: 0px !important; padding: 20px 0; border-bottom: 1px solid #EEE; text-align: center }
    .news ul li img { float: none; width: auto; margin-bottom: 10px; margin: auto }
    .news li p, .news li h4 { text-align: center }
    .news .gotop { display: block }
}
.company-address { float: left; width: 38%; margin-right: 4%; color: #888; font-size: 14px }
.company-address table { width: 100%; border-bottom: 1px dashed #CCC }
.company-address table td.t { width: 30% }
.company-address table td { padding: 10px 0; text-align: left; vertical-align: middle }
.company-address table tr { border-top: 1px dashed #CCC }
.company-map { width: 58%; height: 380px; border: 1px solid #999 }
@media screen and (max-width:990px) { 
    .company-address, .company-map { float: none; width: 100%; margin-bottom: 30px }
}


/* Product */
.spec h4 { padding-bottom: 20px; font-size: 24px; font-weight: normal }
.spec img { max-width: 100%; max-height: 300px }
.spec p { font-size: 16px }
.spec .clef { width: 40% }
.spec .opern { width: 55% }
.spec .wpl { color: #666 }
.spec .wpl .clef { float: right }
.spec .wpr/*, .spec .wpm*/ { background-color: #51ACEC; color: #FFF; }
.spec .wpm { padding: 60px 0 }
.spec .wpm .opern { width: 80%; padding-top: 25px; margin: 0 auto; text-align: center }
.spec .wpm .opern .more { /* color: #FFF;*/ font-size: 16px; display: block; text-align: center; margin-top: 40px; }
.spec .wpm .opern h4, .spec .wpm .opern p { padding-bottom: 5px; text-align: center }
.spec .wpm .clef { width: 100%; margin: 0 auto; text-align: center }
.spec .wpm .clef img { max-width: 90% }
.spec-capates { padding: 35px 0; font-size: 14px; text-align: center }
.spec-capates .opern { margin-top: 50px }
.spec .wpr .clef { float: left }
.spec .wpr .opern { float: right }
.process { padding: 20px 0; background-color: #F8F8F8; border-bottom: 1px solid #CCC; margin-bottom: 30px; }
.process .container { text-align: center }
.process img { max-width: 100% }
@media screen and (max-width:990px) { 
    .spec-capates .opern { margin-top: 20px }
}
@media screen and (max-width:768px) { 
    .spec .wpl .clef, .spec .wpl .opern, .spec .wpr .clef, .spec .wpr .opern { float: none; width: 94%; margin: 0 auto; text-align: center }
    .spec h4, .spec p { text-align: center }
}

/* Cases */
.caselist li { width: 24%; margin-right: 1%; float: left; margin-bottom: 20px;  }
.caselist li img { width: 100%; }
.caselist li a i { font-size: 16px; display: block; margin: 5px; }
.caselist li a:hover img { opacity: .8 }
.caseimgs { margin-bottom: 20px; }
.caseimgs a { width: 46%; display: block; float: left; margin-right: 2%; }
.caseimgs a img { width: 100%; }
.caseimgs .case-item { position: relative; display: block; }
.caseimgs .case-item:hover .zoomer { display: block }
@media screen and (max-width:990px) { 
	.caselist li { width: 32%; margin-right: 1.3%; margin-bottom: 20px;  }
}
@media screen and (max-width:768px) { 
	.caselist li { width: 48%; margin-right: 2%; margin-bottom: 20px;  }
}

/*Friendlink*/
.friendlink{}
.friendlink li{float:left;width:20%;line-height:60px;font-size:18px;text-align:left;}
@media screen and (max-width:1200) { 
	.friendlink li{width:25%;}
}
@media screen and (max-width:990px) { 
	.friendlink li{width:33%;}
}
@media screen and (max-width:768px) { 
	.friendlink li{width:50%;text-align:center;}
}