﻿h1{position:absolute;bottom:20%; right:0; left:0;margin:auto;color:#fff;text-align:left;font-size:30px; letter-spacing:0;line-height:1.4em; margin:auto; opacity:1; padding:10px; text-align:center;text-shadow: 1px 1px 2px silver;font-weight: bold; max-width:700px }
h2,h3{font-weight:bold;color:#fff}
dl dd{display:block;width: 300px;float: left; text-align:left;padding-left:2%}
.con_title{display:inline-block;}
.header-borderbtm{font-size:28px; padding:4px 10px; padding-top:0;color:#00a0e2;border-bottom:solid 4px #00a0e2; display:inline-block }
#container ul.gridlist{width:90%; margin:0 auto}
#container ul.gridlist{overflow:hidden;clear:both; margin-top:30px;}
ul.gridlist li{box-sizing:border-box;border: 1px solid rgb(204, 204, 204); padding: 1%; float:left; width:32%; margin-right:2%; margin-bottom:4%}
ul.gridlist li:nth-child(3n){margin-right:0}
ul.gridlist li a {text-decoration:none; color:#000; display:block}
ul.gridlist li {text-align:center;}
ul.gridlist li p{height:70px; text-align: center;}
.txtbold{font-weight:bold}
.txtbr{display:inline-block}
/* top */
#top{position:relative;top:0px;text-align:center;overflow:hidden; height:auto;clear:both;border-bottom:solid 10px #000}
#top img{width:100%; height:auto; vertical-align: bottom; display:block; margin: 0 auto;padding: 0; border:none; outline:none}
/* top_tab */
#top_tab{margin:auto; background-color:#00a0e2;}
#top_tab ul li{display:inline-block; z-index:10; position:relative; top:-50px; margin:10px 30px; }
/* questions */ 
#questions,#solutions,#fee{clear:both;overflow:hidden}
#questions{background-color:#00a0e2; color:#fff;}
#questions h2, #questions p{font-size:30px;text-align:center; font-weight:bold;line-height:40px;}
#questions h2 img { vertical-align:middle; border: 0; margin-right: 5px;}
#questions ul{width:90%; max-width:580px; margin:0 auto}
#questions ul li{background-color:#fff; color:#000; text-align:center; font-size:20px; padding:10px 6px;letter-spacing:0; margin-bottom:20px;border:solid 4px #00a0e2; border-radius: 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;}
#questions .arrow{margin-bottom:20px;}
#questions p{margin-bottom:30px}
/* solutions */
#solutions ul{width:100%; max-width:860px; margin:0 auto; margin-top:70px; margin-bottom:30px}
#solutions ul li{width:258px; min-height:166px;/*width:30%;*/ margin:0 1%; display:inline-block; box-sizing:border-box; padding:12px 4px;border:solid 4px #00a0e2; border-radius: 26px; -webkit-border-radius: 26px;-moz-border-radius: 26px; font-size:24px; color:#000; vertical-align:top; text-align:center;letter-spacing:0;line-height:1.6em; margin-bottom:50px}
#solutions ul li img{display:block;margin:0 auto;margin-top:-50px}
#advantage{margin-bottom:30px;}
#advantage h2{font-size:28px; padding:4px 10px; padding-top:0;color:#00a0e2;border-bottom:solid 4px #00a0e2; display:inline-block }
#efficient p{display:inline-block; max-width:90%; color:#000;font-size:18px; line-height:1.6em; clear:both}
#efficient h2{font-size:28px; padding:4px 10px; padding-top:0;color:#00a0e2;border-bottom:solid 4px #00a0e2; display:inline-block }
.contact .btn a {background-color:#e70012; color:#fff; font-size:36px; font-weight:bold; width:100%;max-width:500px;padding:20px 10px; text-align:center; display:block; margin:0 auto; margin-bottom:36px;border-radius: 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;line-height:1.2em}
#casestudy h2{font-size:28px; padding:4px 10px; padding-top:0;color:#00a0e2;border-bottom:solid 4px #00a0e2; display:inline-block }
#case01{border-bottom:solid 10px #000;}
#case01,#case02,#case03{border-bottom:solid 10px #000;}
.overview{width:90%; margin:0 auto; padding-top:68px;}
.overview .company_info{margin-bottom:24px}
.blue-area{background-color:#CCE6F5; padding:30px 20px 20px; clear:both }
.border-thin-blue-3 {border: 3px solid #CCE6F5;padding:30px; padding-bottom:10px; text-align:left}
ul.lineblock{overflow:hidden; width:720px; margin:0 auto !important}
.lineblock li{display:inline-block;margin-right:30px; margin-bottom:6px; font-size:18px; color:#000}
.lineblock li:last-child{margin-right:0}
.lv_black{font-size:14px;color:#fff; background-color:#000; line-height:16px;-webkit-border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;padding:2px 8px; margin-right:10px; position:relative; top:-2px}
.dl-table>dt {float: left; clear: left;}
.dl-table>dt, .dl-table>dd {padding: 2px 0; }
.dl-table.dl-table-bordered>dt { width:115px; color:#00a0e2; text-align:left; font-weight:bold}
.company_info{clear:both;overflow:hidden}
.result .tit{color:#00a0e2; font-size:18px;text-align:center; font-weight:bold; margin-bottom:20px}
.company_info dl{width:78%; float:left; }
.company_info dd{width:80%;}
.company_info .c_logo{float:right;width:22%;}
.company_info dt,.company_info dd{font-size:18px}
ul.customer{overflow:hidden;}
ul.customer li{box-sizing:border-box; display:inline-block; vertical-align:top;margin-bottom:24px}
ul.customer li.profile{ width:34%; text-align:center; margin-right:2%; font-size:12px}
ul.customer li.profile img{margin-bottom:16px}
span.campany{display:block;margin-bottom:12px}
ul.customer li.comment{ width:54%; padding:2% 4%; font-size:16px;border:solid 4px #00a0e2; border-radius: 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px; }
.point{position:relative;border-top:solid 10px #00a0e2; clear:both}
.point img {  display: block; width:100%; height:auto}
.point .txtarea{position:absolute; top:0; box-sizing:border-box;width:100%;color:#fff;  background-color: rgba( 0, 0, 0, 0.55 ); padding:20px 90px;}
.point .txtarea h3{font-size:32px; text-align:left; clear:both;}
.point .txtarea p{font-size:18px; line-height:1.6em; clear:both}
.point .txtarea h3 img{display:inline; vertical-align:middle;margin-bottom:10px;margin-right:20px; width:54px; height:auto  }
#fee h2{background-color:#00a0e2; color:#fff; font-size:38px; padding:30px 0}
#fee p{text-align: center; width:90%;display:inline-block; margin:0 auto;margin-bottom:30px;font-size:22px; color:#000}
#fee p#fee_tbl{display:inline-block; margin:0 auto; max-width:90%; margin-bottom:40px}
#fee table{margin:0 auto !important; margin-bottom:40px  !important; font-size:18px; color:#000 }
.text_ss{font-size:6px;}
/* case */
#casestudy .bx-wrapper{margin-bottom:80px}
ul#slidercar{margin:0 auto;margin-bottom:50px;}
ul#slidercar li{box-sizing:border-box;border: 1px solid #ccc;text-align:left;padding:1em;}
ul#slidercar li p{height:80px;}
.car_tit{height:90px; color:#777;}
.car_tit h3{font-size:16px; margin-top:4px; color:#777}
.mfp-iframe-holder .mfp-content {height:100% !important; background-color:#fff}
.mfp-iframe-scaler iframe {background-color:#fff}
/* tab */
#container ul#tab-menu{max-width:90%; margin:0 auto ;list-style: none;  overflow:hidden; }
#tab-menu li {  position:relative;cursor:pointer;  width:auto;  float:left;  background-color:#ffbb00; color: #000; text-align:center;font-size:26px;line-height:1.2em;font-weight:bold; box-sizing:border-box;border-radius: 16px; -webkit-border-radius: 16px;-moz-border-radius: 16px; padding:18px; margin-bottom:40px; margin-right:26px;}
#tab-menu li:after {
 content: '';
  display: inline-block;
  width: 24px;
  height: 22px;
  background-image: url(/sf/images/flw_arrow.png);
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
}
#tab-menu li:last-child:after {display:none;}
#tab-menu li img{margin-bottom:0}
#tab-menu li.active {  background: #ffe9b3;}
#tab-menu li:hover {background-color:#ffe9b3;}
#tab-menu li.active:hover{background-color:#ffe9b3;filter:alpha(opacity=100);opacity:1;}
/* tab contents */
#tab-box { clear:both;display:inline-block;  max-width:90%;margin:0 auto ;margin-bottom:40px;clear:both}
#tab-box div { display: none;}
#tab-box div.active { display: block;}
#tab-box div {border:solid 4px #ffbb00;box-sizing:border-box;border-radius: 16px; -webkit-border-radius: 16px;-moz-border-radius: 16px; font-size:16px; color:#000; padding:18px}
/* place page */
.sf_place h1{position:relative;margin:auto;color:#fff;text-align:left;font-size:38px; letter-spacing:0;line-height:1.4em; margin:auto; opacity:1; padding:50px 10px 10px 10px; text-align:center;text-shadow: 1px 1px 2px silver;font-weight: bold; }
.sf_place #top {border-bottom:solid 10px #000; background-color:pink; height:50%;}
.sf_place #lead{margin-top:20px;}
.sf_place #lead p{margin:auto; margin-bottom:20px}
#list{margin:auto; clear:both;overflow:hidden}
#list p{text-align:center; margin-bottom:40px}
table.place{margin:0 auto; width:98%; max-width:600px; border: solid 1px #ccc; border-collapse: collapse;}
table.place th, table.place td{border: solid 1px #ccc; padding:10px;}
table.place th{font-weight:bold; background: #eee; }
@media (min-width:768px){
.point:nth-child(2n+1) .txtarea{position:absolute; top:0; left:50%; width:50%; min-height:300px;margin:auto;padding:20px 20px;}
#case03 .point:nth-child(2n+1) .txtarea{top:0;left:0;width:100%;padding:20px 90px;}
}
@media (max-width:767px){
#top h1{font-size:20px;}
#questions h2, #questions p{font-size:20px;line-height:32px;}
#questions ul li{ font-size:16px;}
h1{font-size:30px;padding:0}
ul.gridlist li{padding: 10px;width:48%; margin-right:4%; }
ul.gridlist li:nth-child(2n){margin-right:0}
ul.lineblock{width:100%}
.point .txtarea{position:relative;padding:20px 60px}
.contact .btn a {width:90%}
.new_line{display:block;}
p#fee_tbl .new_line{line-height:1.2em}
#top h1 img{display:none;}
.point .txtarea h3 img{display:none;}
#tab-menu li {font-size:20px;line-height:1.2em;font-weight:bold; margin-bottom:35px; margin-right:24px; padding:10px; border-radius: 12px; -webkit-border-radius: 12px;-moz-border-radius: 12px;}
ul.customer li{box-sizing:border-box; display:block; vertical-align:top; margin:0 auto 24px;}
ul.customer li.profile{ width:90%}
ul.customer li.comment{ width:90%}
/* top_tab */
#top_tab ul li{display:inline-block; z-index:9; position:relative; margin:10px; top:-30px;}
/* place page */
.sf_place #top h1{font-size:30px;}
}
@media (max-width:600px){
#top h1{font-size:20px; }
#top h1 img{float:none; display:block;margin:0 auto}
#tab-menu li {font-size:18px;line-height:1.2em;font-weight:bold;  margin-bottom:25px; margin-right:22px; padding:8px; border-radius: 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;}
.sf_place #top h1{font-size:25px;}
}
@media (max-width:480px){
#top h1{font-size:15px; }
.sf_place #top h1{font-size:23px;}
ul.gridlist li p{height:80px; text-align:left}
ul.lineblock{text-align:left}
ul.lineblock li{width:100%;margin-right:0}
#questions h2 {margin-top:10px;font-size:20px;}
#questions h2 img{display:none;}
#questions p{line-height:20px;font-size:20px; font-weight:bold;}
#questions ul li{ font-size:16px;}
.point .txtarea{padding:40px 40px 20px}
.point .txtarea h3{font-size:28px; font-weight:bold;}
.contact .btn a {font-size:28px;}
#tab-menu li {font-size:16px;line-height:1.2em;font-weight:bold; margin-bottom:14px; margin-right:22px; padding:8px; border-radius: 10px; -webkit-border-radius: 10px;-moz-border-radius: 10px;}
#fee h2{font-size:30px;}
#fee p{font-size:16px; color:#000}
}
