@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,figure,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

#backtop { z-index: 9999; position: relative;}

body {
    font-family:"Noto Serif TC","Newsreader", serif;
    font-optical-sizing: auto;
    font-style: normal;
    background:url("../images/bg.jpg") left top repeat-y;
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
    background:url("../images/bg-top.jpg") left top no-repeat;
}


/*======================
====Main CSS=====
=======================*/

.first { padding-top:120px; margin-top: -120px;}
.second { padding-top:90px; margin-top: -90px;}

.menu-line { padding: 55px 0 5px 0; text-align: center;  }

nav.menu{
    position:relative;
    z-index: 999;
}

 /*-------mainpic----------*/

/*.busi-mainpic { margin-top: 40px; }
.busi-mainpic-block {  display: flex; flex-wrap: nowrap; align-content: stretch; overflow: hidden;  margin-left: 5%;  }
.busi-title {  width:29%;  overflow: hidden;  background-color: #94c9db;  border-radius: 120px 0 0 0; padding:2% 2% 2% 3%;  }
.busi-mainpic-pic {  width:71%;  }
.busi-title p { text-align: right;}
h1 { font: 600 60px "Noto Serif TC","Newsreader", serif; padding-top: 110px; }
h1 span { font: 600 28px "Noto Serif TC","Newsreader", serif; display: block; line-height: 46px; }
h1 span.t1 { margin-left: -16px;}
h1 span.t2 { text-align: right;}*/
.busi-mainpic { margin-top: 40px; position: relative; z-index: 1;}
.busi-mainpic-block {  display: flex; flex-wrap: nowrap; align-content: stretch; overflow: hidden;  margin-left: 5%; border-radius: 120px 0 0 0;   }
.busi-mainpic-pic {  width:100%;  position: relative;  z-index: 100;}
.busi-mainpic-pic-mobile { display: none;}
.busi-title {  width:30%; background: rgba(5, 87, 130, 0.85) ;  padding:2% 2% 2% 3%; margin-left: -100%; position: relative;  z-index: 200; }
.busi-title p { text-align: center; padding-top: 26%; }
h1 { font: 600 60px "Noto Serif TC","Newsreader", serif; padding-top: 10% ; color:#ffffff;}
h1 span { font: 600 28px "Noto Serif TC","Newsreader", serif; display: block; line-height: 80px; }
h1 span.t1 { margin-left: 0px;}
h1 span.t2 { text-align: right;}

/*---------*/

img.s-logo { max-width: 130px;}
.concept-title { display: flex; flex-wrap: nowrap; margin:0 auto; max-width: 100%; margin-top: 30px; }
.title-box  { 
    justify-content:space-between; align-items:flex-start;   
}
.concept-title .title-black { 
    color:#212121;
    font-size: 32px; 
    text-align: right;  
    padding:0px 0px 0px 8px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    width: 60%;
    letter-spacing: 1px;
}
.concept-title h2.title-black img { margin-right:16px;}

.concept-title .title-blue { 
    color:#ffffff;
    background: #94c9db;
    font-size: 10px;  
    border-radius: 26px 0 0 26px;
    margin-left:16px;
    text-indent: -5000px;
    width: 40%;
}

/*----*/
.customized-title { display: flex; flex-wrap: nowrap; margin:0 auto; max-width: 100%; margin-top: 100px; }

.customized-title .title-black { 
    color:#212121;
    font-size: 32px; 
    text-align: left;  
    padding:0px 0px 0px 8px; 
    font-family:"Noto Serif TC","Newsreader", serif;
    font-weight: 700;
    width: 60%;
    letter-spacing: 1px;
}
.customized-title h2.title-black img { margin-left:16px;}

.customized-title .title-blue { 
    color:#ffffff;
    background: #94c9db;
    font-size: 10px;  
    border-radius: 0 26px 26px 0;
    text-indent: -5000px;
    width: 40%;
}

/*--------*/

.intro { max-width: 600px; text-align: center; border-bottom: 10px solid #e3e0d4; padding:50px 20px 30px 20px; margin:0 auto; margin-bottom: 50px; }
.intro p { font: 600 16px "Noto Serif TC","Newsreader", serif; line-height: 2em;}
.intro p span { display: block;}

.benefits-bg { background:#d3d8d4; margin-right: 10%; border-radius:0 220px 220px 0; padding:20px 60px 60px 60px; margin-bottom: 80px; }
.concept-outer { max-width: 1500px; margin:0 auto; display: flex; text-align: center; flex-wrap: nowrap; align-content: stretch; overflow: hidden;  }
.customized-outer { max-width: 1500px; margin:0 auto; display: flex; text-align: center; flex-wrap: nowrap; align-content: stretch; overflow: hidden; margin-top: 80px; margin-bottom: 50px  }
.benefits-outer { max-width: 100%; margin:0 auto; display: flex; text-align: center; flex-wrap: nowrap; align-content: stretch; overflow: hidden; margin-top: 40px;  }
.recommend-outer { max-width: 1500px; margin:0 auto; display: flex; text-align: center; flex-wrap: nowrap; align-content: stretch; overflow: hidden; margin-top: 80px; margin-bottom: 50px  }

.flex-box { flex:0 0 31.3%; margin:0 1%; justify-content:center; align-items:center; align-items:stretch; }
.flex-box p { font: 600 15px "Noto Serif TC","Newsreader", serif; line-height: 1.7em; text-align: left; padding:12px 0 0 0 ;}
.customized-outer .flex-box p { text-align: center;}
figure.mobile { display: none;}
.benefits-outer .flex-box { flex:0 0 14.6%; margin:0 1%; align-items:center; align-items:stretch; }
.benefits-outer .flex-box p { text-align: center; padding-top: 0px; }
.benefits-title { margin:0 auto; margin-top: 20px; margin-left: 38%;} 
.benefits-title p { background: #f9f4eb; max-width: 350px; font: bolder 24px "Noto Serif TC","Newsreader", serif; border-radius: 37px; padding:4px 15px; text-align: center; }

h3 { font: bolder 18px "Noto Serif TC","Newsreader", serif; color:#000000; text-align: center; border-bottom: 4px solid #decc8e; line-height: 2em; }
.customized-outer h3 { font: bolder 18px "Noto Serif TC","Newsreader", serif; color:#000000; text-align: center; line-height: 2em; border:none; }
.recommend-outer h3 { font: bolder 22px "Noto Serif TC","Newsreader", serif; color:#000000; text-align: center; border-bottom: 4px solid #decc8e; line-height: 2em; }
h4 { font: bolder 20px "Noto Serif TC","Newsreader", serif; color:#000000; text-align: center; line-height: 1.8em; padding-top: 6px;  }

.radius-left img { border-radius: 0 0 300px 0; }
.radius-middle img  { border-radius: 240px 240px 0 0; }
.radius-right img { border-radius: 300px 0 0 0; }

.service-box { background: url(../images/frame.png) center center no-repeat; text-align: center; width: 302px; height: 326px; margin: 0 auto; margin-top: 20px; margin-bottom:20px; padding:10% 10%;}


.styled {
    border: 1px solid #ab954b;
    padding: 8px 10px;
    font: bold 16px "Noto Serif TC","Newsreader", serif;
    text-align: right;
    color: #353535;
    border-radius: 20px;
    background: transparent;
    float:right;
    margin-right: 40px;
    margin-top:15px;
  }
  
  .styled:hover {
    color:#5f511f;
    background: #eee8d2;
  }
  .styled a {text-decoration: none; color:#353535; padding-left: 6px; }
  .styled a:hover {text-decoration: none; color:#5f511f; }

  .styled img { translate: 30px; transition: 0s;}
  .styled:hover img { translate: 45px; transition: .5s;}


/*服務據點*/

.block-center {
	width: 100%;
	max-width: 960px;
	margin: auto;
	clear: both;
	position: relative;
}

.block-connection {
	width: 100%;
	clear: both;
}

.connection-main {
	width: 100%;
	background: #005eb8;
}

.connection-main .block-center {
	display: flex;
	padding: 70px 20px 0 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.connection-main-box {
	width: 50%;
	text-align: left;
	margin: 0 0 70px 0;
}

.connection-main-name {
	width: 100%;
	clear: both;
	color:#ffffff;
	font-size: 30px;
	margin: 0 0 15px 0;
    font: 800 30px "微軟正黑體"; 
}

.connection-main-but {
	width: 100%;
	clear: both;
}

.connection-main-but a {
	border:1px solid #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 50px;
	text-align: center;
	padding: 5px 20px;
	color:#ffffff;
	font-size: 15px;
	display: inline-block;
	margin: 0 10px 10px 0;
	line-height: 22px;
    text-decoration: none;
}

.connection-main-but a:hover {
	border: 1px solid #005eb8;
	background: #ffffff;
	color:#005eb8;;
}

.connection-main-tel {
	width: 100%;
	color: #ffffff;
	text-align: left;
    font: 500 15px "微軟正黑體"; 
	display: flex;
    flex-wrap: wrap;
}

.connection-main-tel span {
	display: inline-block;
	line-height: 22px;
	margin: 0;
    width: 33%;
}

span.connection-main-tel-full {
	width: 100%;
}


/*------media query----------*/

@media only screen and ( max-width:1600px) 
{ 
    h1 { font-size: 50px; }
    .busi-title p { padding-top:20% ;}
    .busi-title p img { max-width: 190px; }
    .benefits-bg { margin-right: 5%;  padding:20px 20px 60px 20px;}
    h4 { font-size: 18px; }
}
@media only screen and ( max-width:1300px) 
{ 
    .busi-title p img { max-width: 160px;}
    h1 { font-size: 42px; }
    h1 span { font-size: 20px;  }
    .concept-title .title-black { font-size: 26px; width: 70%; }
    .concept-title .title-blue { width: 30%; }
    .customized-title .title-black { font-size: 26px; width: 70%; }
    .customized-title .title-blue { width: 30%; }
    .benefits-bg { margin-right: 2%;  padding:20px 10px 60px 10px; border-radius:0 160px 160px 0;}
    h4 { font-size: 16px; }


}
@media only screen and ( max-width:1100px) 
{ 
   .busi-title {  width:40%; }
   .busi-title p { padding-top:10% ;}
   .busi-title p img { max-width: 160px;}
    h1 { font-size: 46px; padding-top: 0% ;}
    h1 span { font-size: 20px;  }
    .radius-left img { border-radius: 0 0 200px 0; }
    .radius-right img { border-radius: 200px 0 0 0; }
    .benefits-outer .flex-box { flex:0 0 15%; margin:0 0.5%;  }
}
@media only screen and ( max-width:1024px) 
{ 
    .concept-title .title-black { font-size: 22px; width: 80%; }
    .concept-title .title-blue { width: 20%; }
    .customized-title .title-black { font-size: 22px; width: 80%; }
    .customized-title .title-blue { width: 20%; }
}

@media only screen and ( max-width:958px) 
{
    .customized-outer { flex-wrap: wrap;}
    .customized-outer .flex-box {  flex:0 0 96%; margin:0 2% 80px 2%;  }
    figure.pc { display: none;}
    figure.mobile { display: block;}
    .service-box { padding:6% 5%;}
    .benefits-outer { flex-wrap: wrap;}
    .benefits-outer .flex-box { flex:0 0 31.3%; margin:2% 1%;  }
    .benefits-bg {padding:20px 50px 60px 50px; }
    h4 { font-size: 20px; }
    .benefits-title { margin-left: 30%;} 


}
@media only screen and ( max-width:900px) 
{
    .menu_content{ margin-left: 10px; }
    .busi-mainpic-block { border-radius: 80px 0 0 0; }
    .busi-title p img { max-width: 130px; }
    .busi-title p { padding-top:8% ;}
    h1 { font-size: 36px; }
    h1 span { font-size: 17px;  }
    .benefits-title { margin-left: 26%;} 
    .connection-main-tel span { width: 100%; }
}
@media only screen and ( max-width:812px) 
{ 
    .busi-mainpic-block {  flex-wrap: wrap; /*display: block;*/}
    .busi-title { order:1; width: 100%; margin-left: 0%;  text-align: center; }
    .busi-mainpic-pic { order:2;}
    .busi-title p img { max-width: 150px; }
    .busi-title p { padding-top:2% ; text-align: right;}
    h1 { font-size: 50px; padding-top: 0% ;}
    h1 span { font-size: 20px; line-height: 40px;  }
    h1 span.t1 { margin-left: 0px; /*display: inline-block; padding-right: 6px;*/}
    h1 span.t2 { text-align: center;}

    .concept-outer { flex-wrap: wrap;}
    .concept-outer .flex-box {  flex:0 0 96%; margin:0 2% 80px 2%;  }
    .customized-title { margin-top: 30px; }
    .recommend-outer { flex-wrap: wrap;}
    .recommend-outer .flex-box {  flex:0 0 96%; margin:0 2% 80px 2%;  }
    .radius-left img { border-radius: 240px 240px 0 0;  }
    .radius-right img { border-radius: 240px 240px 0 0;  }
    .benefits-title { margin-left: 24%;} 
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:20px; margin-top: 0px;}
    .second { padding-top:20px; margin-top: 0px;}
    .menu { display: none;}
    .menu-line { display: none;}
    h1 { font-size: 50px;  padding-top: 20px;}
    h1 span { font-size: 20px;  }
    h1 span.t1 { margin-left: 0px;}
    .benefits-title { margin-left: 5%;} 
    h4 { font-size: 17px; }
    .flex-box p { padding:12px 8px 0 8px; }
    .connection-main-box {width: 100%; margin: 0 0 20px 0;	}
	.connection-main .block-center {padding: 20px 20px 0 20px;	}
	.connection-main-name ,.connection-main-but ,.connection-main .block-center ,.connection-main-tel {	text-align: center;	}
}
@media only screen and (max-width:600px) 
{
    .busi-mainpic-pic { display: none;}
    .busi-mainpic-pic-mobile { display: block; order:2;}
    .benefits-outer .flex-box { flex:0 0 42.5%; margin:2% 2%;  }
}
@media only screen and (max-width:520px) 
{
    .busi-title p img { max-width: 120px; }
    .busi-title p { text-align: center;}
    img.s-logo { max-width: 100px;}
    .concept-title .title-black { font-size: 24px; width: 100%; text-align: center; line-height: 50px; border-bottom: 5px solid #94c9db; margin:0 15px;}
    .concept-title .title-blue { display: none; }
    .concept-title h2.title-black img { margin-right:6px;}
    .customized-title .title-black { font-size: 24px; width:100%; text-align: center;  line-height: 50px; border-bottom: 5px solid #94c9db;  margin:0 15px;}
    .customized-title .title-blue { display: none; }
    .customized-title h2.title-black img { margin-right:6px;}
}
/*---手機版-----*/

@media only screen and (max-width:480px) 
{
    h1 { font-size: 46px;}
    h1 span { font-size: 18px;  }
    .benefits-outer .flex-box { flex:0 0 93%; }
    h3,.recommend-outer h3,.customized-outer h3 { font-size: 20px; }
    h4 { font-size: 20px; }
    .flex-box p {  font-size: 16px; }
    .benefits-outer .flex-box p { font-size: 17px; }

}

@media only screen and (max-width:380px) 
{
    h1 { font-size: 40px;}
    h1 span { font-size: 16px;  }

}