/** {margin:0px; padding:0px;}
a:link, a:active, a:hover, a:focus, a:visited {outline:none;}
body, html {font-size:14px !important; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important; font-weight:300 !important;}*/

.cleardiv {clear:both;}

.back_to_top {font-family:Arial,sans-serif; font-size:14px; line-height:16px; font-weight:300; text-transform:none; color:#fff; text-align:center; text-transform:uppercase; display:none; background:black; width:60px; height:40px; box-sizing:content-box; padding:5px 0px; cursor:pointer; position:fixed; right:0; bottom:0; z-index:9999;}

font.mon {font-family: 'Montserrat',Arial,sans-serif;}


@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
      url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
  }



#pg_kv {display:block; width:100%; height:400px; position:relative; box-sizing:border-box; padding-top:150px;}
#pg_kv h1 {display:block; font-size:48px; color:white; text-align:center; font-weight:300; opacity:0; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei',sans-serif !important;}
#pg_kv h1:after {position:absolute; content:""; display:block; width:200px; height:5px; margin-top:5px; background:white; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);}

.kv1 {background:url(../images/solution_kv1.jpg) center no-repeat; background-size:cover;}
.kv2 {background:url(../images/solution_kv2.jpg) center no-repeat; background-size:cover;}
.kv3 {background:url(../images/solution_kv3.jpg) center no-repeat; background-size:cover;}
.kv4 {background:url(../images/solution_kv4.jpg) center no-repeat; background-size:cover;}

h2.section_title {font-size:30px; color:#005172; font-weight:400; text-align:center; margin-top:100px; opacity:0;}

.section {position:relative; background:linear-gradient(transparent 30%, #eee 30%); padding-bottom:70px;}
.section .pic_con {display:block; width:100%; max-width:1200px; height:360px; position:relative; margin:30px auto;}
.section .pic_con .thre {display:block; float:left; width:calc(100%/3); height:100%; box-sizing:border-box; position:relative;}
.section .pic_con .thre:first-child {border-right:1px solid white;}
.section .pic_con .thre:nth-child(2) {border-left:1px solid white; border-right:1px solid white;}
.section .pic_con .thre:last-child {border-left:1px solid white;}

.section .pic_con.pic1 {background:url(../images/sl_sec_bg_1.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic2 {background:url(../images/sl_sec_bg_2.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic3 {background:url(../images/sl_sec_bg_3.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic4 {background:url(../images/sl_sec_bg_4.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic5 {background:url(../images/sl_sec_bg_5.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic6 {background:url(../images/sl_sec_bg_6.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic7 {background:url(../images/sl_sec_bg_7.jpg) center no-repeat; background-size:cover; opacity:0;}
.section .pic_con.pic8 {background:url(../images/sl_sec_bg_8.jpg) center no-repeat; background-size:cover; opacity:0;}

.section .pic_con .thre .q {display:block; width:100%; height:100%; box-sizing:border-box; padding-top:40%; position:relative; font-size:20px; line-height:30px; color:white; text-align:center; overflow:hidden !important;}
.section .pic_con .thre:hover {cursor:pointer;}

.section .pic_con .thre .a {display:block; width:0%; height:100%; box-sizing:border-box; position:absolute; top:0px; left:0px; z-index:3; background:rgba(0, 81, 114, 0.7); opacity:0;}
.section .pic_con .thre .a p {display:block; width:80%; height:auto; position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size:16px; line-height:24px; color:white; font-weight:300; text-align:justify; opacity:0;}
.section .pic_con .thre .a p .mon {font-size:24px; font-weight:600; position:relative;}
.section .pic_con .thre .a p .mon:after {position:absolute; content:""; display:block; width:100%; height:2px; background:#cc4b85; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);}

.section a.mor_case {display:block; width:200px; height:50px; margin:0px auto 50px auto; font-size:18px; line-height:50px; text-align:center; color:#005172; border:1px solid #005172; text-decoration:none; font-weight:400;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.section a.mor_case:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0079aa+0,089ac1+50 */
  background: #0079aa; /* Old browsers */
  background: -moz-linear-gradient(left,  #0079aa 0%, #089ac1 50%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #0079aa 0%,#089ac1 50%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #0079aa 0%,#089ac1 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0079aa', endColorstr='#089ac1',GradientType=1 ); /* IE6-9 */
}
.section a.mor_case:hover, .section a.mor_case:focus, .section a.mor_case:active {
  color: white; border:1px solid #eee;
}
.section a.mor_case:hover:before, .section a.mor_case:focus:before, .section a.mor_case:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.contact_info {display:block; box-sizing:border-box; position:relative; padding:100px 0px; opacity:0;}
.contact_info p {font-size:24px; font-weight:500; line-height:48px; text-align:center; color:#0490b5;}

.contact_info a.con_btn {display:block; width:220px; height:70px; font-size:24px; line-height:70px; color:white; font-weight:400; text-align:center; margin:50px auto 0px auto; text-decoration:none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0490b5+0,00b2aa+100 */
  background: #0490b5; /* Old browsers */
  background: -moz-linear-gradient(left,  #0490b5 0%, #00b2aa 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #0490b5 0%,#00b2aa 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #0490b5 0%,#00b2aa 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0490b5', endColorstr='#00b2aa',GradientType=1 ); /* IE6-9 */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}
.contact_info a.con_btn:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.contact_info a.con_btn:hover:before, .contact_info a.con_btn:focus:before, .contact_info a.con_btn:active:before {
  border:4px solid #0490b5;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

.why_dnb {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 100px 0px;
    margin-bottom: -60px;
    background: url(/assets/img/sl_why_bg1.jpg) center no-repeat;
    background-size: cover;
    opacity: 0;
}
.why_dnb .why_h1 {font-size:30px; line-height:35px; text-align:center; font-weight:500;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0db2de+0,03e0d6+100 */
  background: #0db2de; /* Old browsers */
  background: -moz-linear-gradient(left,  #0db2de 30%, #03e0d6 70%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #0db2de 30%,#03e0d6 70%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #0db2de 30%,#03e0d6 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0db2de', endColorstr='#03e0d6',GradientType=1 ); /* IE6-9 */
  background-clip:text;
  -moz-background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.why_dnb .cen {display:block; width:100%; max-width:1200px; margin:auto; position:relative;}

.why_con {display:block; float:left; width:calc(100% / 5); margin-top:80px; opacity:0;}
.why_con .why_reason {font-size:20px; text-align:center; color:white; font-weight:400;}
.why_con .why_best {font-size:28px; text-align:center; font-weight:400; line-height:36px; margin-top:15px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0db2de+0,03e0d6+100 */
  background: #0db2de; /* Old browsers */
  background: -moz-linear-gradient(left,  #0db2de 30%, #03e0d6 70%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #0db2de 30%,#03e0d6 70%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #0db2de 30%,#03e0d6 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0db2de', endColorstr='#03e0d6',GradientType=1 ); /* IE6-9 */
  background-clip:text;
  -moz-background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.why_con .why_count {font-size:48px; text-align:center; font-weight:400; color:white; margin-top:30px;}

.why_dnb .upd {font-size:12px; color:white; position:absolute; right:10px; bottom:10px;}

@media screen and (max-width:796px) {

    #pg_kv {height:350px}
    #pg_kv h1 {font-size:30px;}
    #pg_kv h1:after {width:150px; height:3px; margin-top:5px;}

    h2.section_title {font-size:20px; margin-top:7vh}

    .section .pic_con {height:auto; margin:5vh auto 0vh auto;}
    .section .pic_con .thre {float:none; width:100%; height:auto;}
    .section .pic_con .thre:first-child {border-left:0px; border-bottom:2px solid white;}
    .section .pic_con .thre:nth-child(2) {border-left:0px; border-right:0px; border-bottom:2px solid white;}
    .section .pic_con .thre:last-child {border-left:0px;}
    .section .pic_con .thre .q {padding:10vh 0px; height:auto; font-size:16px; line-height:24px;}
    .section .pic_con .thre .a p {font-size:14px; line-height:20px;}

    .section a.mor_case {margin:auto;}

    .contact_info {padding:7vh 0px;}
    .contact_info p {display:block; width:90%; margin:auto; font-size:20px; line-height:34px;}
    .contact_info a.con_btn {font-size:20px; height:50px; line-height:50px;}

    .why_dnb {padding:7vh 0px;}
    .why_dnb .why_h1 {font-size:22px;}
    .why_con {float:none; width:100%; margin-top:40px;}
    .why_con .why_reason {font-size:16px;}
    .why_con .why_best {font-size:20px; margin-top:0px;}
    .why_con .why_count {font-size:40px; margin-top:0px;}

}