@charset "utf-8";

/* CSS Document */
html,body {
    padding: 0px;
    margin: 0px;
	font-size:17px;
	color:#333333;
	line-height:25px;
	height: 100%;
	font-family:  'Oswald', "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: 100%;
}

a:link, a:visited {color: #333333;	text-decoration: none;}
a:hover {text-decoration: underline; color:#ff7629; text-decoration: none;}
div, ul, li{ margin:0px auto; padding:0px;}

.clear{clear:both}
img {border:0;}
h1, h2, h3, h4, h5, h6{ padding:0px; margin:0px; line-height:32px; }

h1{ font-size:38px; padding:30px 0; line-height:42px; text-align: center; color:#1c7dc1}
h2{ font-size:38px; padding:30px 0; line-height:42px; text-align: center; color:#000000}
h3{ font-size:30px; padding:30px 0; line-height:36px; text-align: center; color:#1c7dc1}
h4{ font-size:30px; padding:30px 0; line-height:36px; text-align: center; color:#1c7dc1}
h5{ font-size:30px; padding:30px 0; line-height:36px; text-align: center; color:#1c7dc1}

.green h1{ color:#298321 }

p { padding:0px; margin:0px;}

#wrap{ width:100%; min-height: 100%; height: auto%; background:#FFF; min-width:980px; box-sizing:border-box;}


.ctd{min-width:640px; max-width:1600px; padding:0 10px; width:auto; position:relative;}

.top{ height: auto; position:relative; text-align: center}
.logo_mobile{ display:none;}
#nav-wrap{ z-index:999; position:absolute; width:100%; text-align: center;}

#nav-wrap ul{ list-style:none; background:#fff;-webkit-border-bottom-right-radius: 6px;-webkit-border-bottom-left-radius: 6px;-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;border-bottom-right-radius: 6px;border-bottom-left-radius: 6px; height:85px; width:100%; max-width:1600px; box-shadow:0px 1px 3px #888;}
#nav-wrap ul li{ float:left;text-align: center; }
#nav-wrap li { width:22%;}
#nav-wrap li + li { width:12%; background:url(../images/menu_sp.png) left center no-repeat;}
#nav-wrap li + li + li{ width:14%; }
#nav-wrap li + li + li + li{ width:12%; }
#nav-wrap li + li + li + li+ li{ width:14%; }
#nav-wrap li + li + li + li+ li+ li{ width:14%; }
#nav-wrap li + li + li + li+ li+ li+ li{ width:12%; }



#nav-wrap ul li a{ display:block; -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out; opacity: 1; font-size:19px; line-height:24px; }

#nav-wrap .logo{ padding:16px 0px 0 0px; z-index:9999}
#nav-wrap .home a{ padding:16px 15px;}
#nav-wrap .home a:hover, #nav-wrap .home a.current { background:#268dd9}

#nav-wrap .aboutus a{   padding:30px 0 ; color:#2f8ace}
#nav-wrap .aboutus a:hover, #nav-wrap .aboutus a.current{ background:#ecf7ff; }
#nav-wrap .aboutus span{background:url(../images/icon_about_home.png) left center no-repeat;  background-size:21px auto; padding-left:30px; }

#nav-wrap .webdesign a{ padding:30px 0 ; color:#298321}
#nav-wrap .webdesign a:hover, #nav-wrap .webdesign a.current{ background:#f3f9f2}
#nav-wrap .webdesign span{background:url(../images/icon_web_design.png) left center no-repeat;  background-size:21px auto; padding-left:30px; }


#nav-wrap .knowledge a{ padding:30px 0 ; color:#72519f}
#nav-wrap .knowledge a:hover, #nav-wrap .knowledge a.current{ background:#f2e8f7}
#nav-wrap .knowledge span{background:url(../images/icon_web_knowledge.png) left center no-repeat;  background-size:21px auto; padding-left:30px; }

#nav-wrap .portfolio a{ padding:30px 0 ; color:#333 }
#nav-wrap .portfolio a:hover, #nav-wrap .portfolio a.current { background:#f8f8f8}
#nav-wrap .portfolio span{background:url(../images/icon_portfolio.png) left center no-repeat;  background-size:21px auto; padding-left:30px; }

#nav-wrap .online_quote a{ padding:30px 0 ; color:#ff8648 }
#nav-wrap .online_quote a:hover, #nav-wrap .online_quote a.current{ background:#fffbe8}
#nav-wrap .online_quote span{background:url(../images/icon_online_quote.png) left center no-repeat;  background-size:21px auto; padding-left:30px; }

#nav-wrap .contactus a{padding:30px 0 ; color:#f8447a }
#nav-wrap .contactus a:hover, #nav-wrap .contactus a.current{ background:#fff5f8}
#nav-wrap .contactus span{background:url(../images/icon_contactus.png) left center no-repeat;  background-size:21px auto; padding-left:30px; }

.tag_area{ font-size: 13px;
  line-height: 14px;
  display: flex;
  text-align: left;
  margin: 10px 0 0px 7.5%; }
  
.tag_area span{ border-radius:8px; padding:5px 10px; margin:0.5px 2.5px; color:#fff; }
.tag::before {
    content: "#";
    margin-right: 2px;
}
.tag-wcag{background:#fdc73a; color:#000 !important}
.tag-primary{background:#5fbc57;}
.tag-secondary{background:#1876b9;}
.tag-ngo{background:#f17b34;}
.tag-company{background:#5253a3;}

.blue .top h1{ position:absolute; top:23%; width:100%;  font-size:65px; color:#fff;  margin-top:145px; text-transform:uppercase; text-shadow:0px 1px 5px #333; text-align: center; z-index:999; }
.blue .top h2{position:absolute; top:53%; width:100%;  font-size:35px; color:#fff;  margin-top:40px; text-transform:uppercase; text-shadow:0px 1px 5px #333; text-align: center; z-index:999;}
.blue .top h1 span{ line-height:80px;}
.blue .top .slogon_webdesign{ position:absolute; top:23%; width:100%;  font-size:65px; color:#fff;  margin-top:145px; text-transform:uppercase; text-shadow:0px 1px 5px #333; text-align: center; z-index:999; }
.blue .top .desc_webdesign{position:absolute; top:53%; width:100%;  font-size:35px; color:#fff;  margin-top:40px; text-transform:uppercase; text-shadow:0px 1px 5px #333; text-align: center; z-index:999;}

.main_webdesign{ background:#fafafa; height: auto; text-align: center;}
.main_webdesign h1{ padding:50px 0 20px 0;}
.main_webdesign h3{ font-size:37px; color:#2f8ace; padding:50px 0 30px; text-transform:uppercase;  text-align: center; }
.main_webdesign h3 img{ padding:2px 15px 0 0; }


.main_webdesign ul{ list-style:none; padding:50px 0px;}
.main_webdesign ul li{ float: left;  height: auto; width:23%;  margin:0 1%;  border-radius:8px;  box-shadow:0px 0px 3px #ccc; }


.main_webdesign ul li ul { list-style: outside; padding:10px 10px 10px 20px; margin:0;}
.main_webdesign ul li ul li{ float: none;  height: auto; width:100%;  margin:0 ;  border-radius:0px;  box-shadow:0px 0px 0px #ccc; text-align:left; font-size:15px; line-height:17px;background: none !important; }
.main_webdesign ul li a { display:block}

.main_webdesign ul .view {
   width: 100%;
   height: 100%;
   margin: 0px;
   overflow: hidden;
   position: relative;
   border-radius:8px;
}
.maks { width:100%; overflow:hidden;}

.main_webdesign ul li + li{  }

.main_webdesign ul p{ text-align: center;}
.main_webdesign ul b{ text-align: center; font-size:19px; display:block}

.main_webdesign ul .webdesign_title{ text-align: center; padding:15px 0px 5px 0px; font-size:19px; }
.main_webdesign ul .webdesign_title_en{ text-align: center; padding:0px 0px 15px 0px; font-size:15px;  }
.main_webdesign ul .desc{ text-align: center; padding:15px 20px 15px 20px; font-size:17px; line-height:23px; position:relative; }

.main_webdesign ul li .webdesign_title {color: #ffae00}

.main_webdesign ul li+li .webdesign_title {color: #2f8ace}

.main_webdesign ul li+li+li  .webdesign_title {color: #e80c0c}
.main_webdesign ul li+li+li +li  .webdesign_title {color: #921284}



.more_info{ margin:0px auto; text-align: center; margin-bottom:20px;}
.more_info a{ font-size:15px; display: inline-block !important; padding:10px 50px; color:#333 ;  background: linear-gradient(to left, #fcf76a 50%, #fe137f 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }
.more_info a:hover { background-position: left bottom; color:#fff;}

.main_webdesign ul li img{ width:100%;}
.main_webdesign ul li + li{ background:url(../images/blue_arrow_left.png)#fff no-repeat left top;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
background-color: rgba(255,255,255, 0.9);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.main_webdesign ul li + li:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
background-color: rgba(162,215,255, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
box-shadow:0px 0px 3px #2f8ace; 
}
   
.main_webdesign ul li{ background:url(../images/orange_arrow_left.png)#fff no-repeat left top;}
.main_webdesign ul li:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
background-color: rgba(255,174,0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
box-shadow:0px 0px 3px #ffae00; 
}

.main_webdesign ul li + li + li{ background:url(../images/red_arrow_left.png)#fff no-repeat left top;}
.main_webdesign ul li + li + li:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
background-color: rgba(255,172,172, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
box-shadow:0px 0px 3px #e80c0c; 
}
.main_webdesign ul li + li + li + li{ background:url(../images/grupe_arrow_left.png)#fff no-repeat left top;}
.main_webdesign ul li + li + li + li:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
background-color: rgba(209,138,201, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
box-shadow:0px 0px 3px #921284; 
}

.blue_color{ color:#2f8ace; }
.orange_color{ color:#ffae00; }
.red_color{ color:#e80c0c; }
.grupe_color{ color:#921284; }

.main_latest_area{ background: url(../images/city_main_bg.png) repeat-x bottom center #e2f2fa; min-height:470px; }
.main_latest_area .ctd{ padding:30px 0px 100px 0px; position:relative;}
.main_latest_area .shotcut_icon{ }
.main_latest_area .shotcut_icon ul{ list-style:none; padding:10px 0px; list-style:none; margin-left:1%;}
.main_latest_area .shotcut_icon ul li{ width:31%; text-align: center; font-size:15px; padding:1%; float:left;}
.main_latest_area .shotcut_icon ul li .title{ font-size:28px; color:#005ca2; padding:10px 0px 15px 0}
.main_latest_area .shotcut_icon ul li img{  }
.main_latest_area .shotcut_icon ul li .go_link{ width:55%; font-size:15px; padding-top:15px;}
.main_latest_area .shotcut_icon ul li .go_link a{ color:#FFF; line-height:40px; display:block; background:url(../images/btn_go.png) repeat-x; border-radius:6px; white-space: nowrap;}
.main_latest_area .shotcut_icon ul li .go_link a:hover{ color:#FFF; line-height:39px; display:block; background:url(../images/btn_go_over.png) repeat-x; margin-top:1px;}

.main_latest_area .wheel{ position:absolute; right:28%; bottom:-10px;}
.main_latest_area .Helicopters{ position:absolute; left:355px; bottom:50px;}


.main_latest_area .quotation{ float: right; width:49%;}
.main_latest_area .quotation h5{ color:#268dd9;  text-transform:uppercase; text-align: center; font-size:32px;  text-shadow:0px 1px 5px #ccc; }
.main_latest_area .quotation h5 img{ padding-right:10px;}

.main_project_ref{ background: url(../images/bg_project_reference.png) no-repeat top center #fff; }
.main_project_ref .ctd{ padding:30px 0px; position:relative;}
.main_project_ref .plane_station{ position:absolute; left:355px; top:0px;}
.main_project_ref .plane{ position:absolute; left:40%; top:-12px;}

.main_project_ref h4{ color:#268dd9;  text-transform:uppercase; text-align: center; font-size:32px;  }
.main_project_ref h4 img{ padding-right:10px;}

.successful_data { margin:20px 0 ; text-align: center;}
.successful_data h5{ color:#268dd9;  text-transform:uppercase; text-align: center; font-size:32px; padding-top:50px;  }
.successful_data ul{ list-style:none; padding:100px 0px; list-style:none; }
.successful_data ul li{ margin:0 3.5%;  width: calc(18% - 36px); text-align: center; font-size:17px; float:left; border:3px solid #ff9b00; color:#666; border-radius:12px; padding:20px 15px 30px 15px;}
.successful_data ul li+li{  border:3px solid #0081ba; }
.successful_data ul li+li+li{  border:3px solid #db3626; }
.successful_data ul li+li+li+li{  border:3px solid #418339; }

.successful_data ul li b{ font-size:19px; line-height:23px; padding:5px 0 20px 0; display:block; }
.successful_data ul li .counter{ display: inline-block; font-size:44px; color:#000000; } 
.successful_data ul li .counter::after{ content:"+" } 

.main_project_ref .silder_ref{}
.main_project_ref .silder_ref ul{ list-style:none; width:100%; padding:15px 0px 50px 0px; margin-left:-1.5%;}

.reference .portfolios{ list-style:none; padding:155px 0px 0px 0px; }
.reference .portfolio{ float:left; width:31% !important; margin-left:2%; margin-top:5px; }
.reference .portfolio .view{  box-shadow:0px 0px 2px  rgba(0,0,0,.2) !important; }

.main_project_ref .silder_ref ul li{ float:left; width:23%; margin:10px 0 10px 2%; box-shadow:0px 0px 0px #666; }
.main_project_ref .silder_ref ul li div{ }

.main_project_ref .truck{ position:absolute; left:0px; top:0px;}



.main_project_ref .silder_ref ul li .view {
   width: 100%;
   height: 100%;
   margin: 0px;
   float: left;
   border: 2px solid #fff; ;
   overflow: hidden;
   position: relative;
   text-align: center;
}
.main_project_ref .silder_ref ul li .view .mask,.view .content {
    width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.main_project_ref .silder_ref ul li .view img {
   display: block;
   position: relative;
}
.main_project_ref .silder_ref ul li .view b {
   text-transform: uppercase;
   color: #fff; display:block;

   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   margin: 18% 0 0 0; text-shadow:0px 0px 3px #000
}
.main_project_ref .silder_ref ul li .view a.info {
   display: inline-block;
   text-decoration: none; font-size:15px;
   padding: 2px 10px 2px 35px;
   background: url(../images/btn_launch.png) no-repeat #ff9000;
   background-position:10px 50%;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #ccc;
   -moz-box-shadow: 0 0 1px #ccc;
   box-shadow: 0 0 1px #ccc;
}
.main_project_ref .silder_ref ul li .view a.info:hover {
	background: url(../images/btn_launch.png) no-repeat #268dd9;
   background-position:10px 50%;
}


.main_project_ref .silder_ref ul li img{ width:100%; }
.footer{ text-align: center; padding:23px 0px 20px 0; color:#FFF; font-size:12px;  line-height:12px;}

.inner_banner{ height:300px; }

.inner_banner .windowA{ position:absolute; right:140px; top:155px;}
.inner_banner .windowB{ position:absolute; right:290px; top:155px;}
.inner_banner .windowC{ position:absolute; right:400px; top:155px;}
.inner_banner .traffic_light{ position:absolute; right:850px; bottom:0px;}

.webdesign_title{ padding:15px 0px; text-align: center;}
.webdesign_title h1{  }
.webdesign_title h1{ font-size:45px; text-transform:uppercase; padding:20px 0 15px}
.lv_2_title{ color:#333; font-size:24px; padding-bottom:20px;}

.intro{ background:#1c7dc1; color:#fff; padding:40px 0px; }

.intro img{ float:left; position:absolute; top:0; left:10px;}

.intro_des{ float: left; margin:0 0 0 130px}

.intro p{ padding:35px 20px 0 0;}
.flow{ background: url(../images/arrow_flow.png) #e8f1f4 center top no-repeat; padding:20px 0px;}
.flow h2{ color:#000; padding:25px 0px 5px 0px; text-align: center; font-size:21px; border-bottom:3px solid #1c7dc1; line-height:21px; display: inline-table; margin-left:20px;}

.flow ul{ padding:10px 0px; list-style:none}
.flow ul li{ float:left; width:20%; text-align: center; padding:30px 0 30px 0; position:relative;}
.flow ul .photo{ border:4px solid #fff; width:80%; box-shadow:0px 0px 3px #ccc;}
.flow ul .photo img{ width:100%;}
.flow ul .icon{ width:100%; text-align: center; height:75px; background:url(../images/bg_flow.png) center no-repeat;  line-height:95px; position:absolute;  top:160px;}
.flow ul .icon img{ padding:19px  0 0}
.flow ul .description{ border-top: 1px solid #1175bf; border-bottom:1px solid #ccc; padding:5px 0px; width:80%; margin-top:45px; text-align: left;  }
.flow ul .step{ color:#999}

.skills{padding:50px 0}
.skills h3{padding:0 0 50px}
.left_photo{ float: left; width:32%; margin:0 0 50px 2%; }
.left_photo img{  width:100%; border:2px solid #fff; box-shadow:0 0 3px rgba(0,0,0,.2) }

.right_faq a { text-decoration: underline; color:#188aff }   
.right_faq a:hover { text-decoration: none; color:#666 }   
.right_faq{ float:right; width:60%; margin:0 2% 0 0;}

.right_faq #faq { padding:0; margin:0; box-shadow: 0 0 0; margin-bottom:20px; }

.skills h4{ background:#dff2ff; color:#333; padding:15px; font-size:21px; line-height:28px; font-weight:500; display:block;  transition: 0.4s;
  cursor: pointer; margin:1px 0;}
.skills h4::after{ content:"+"; font-size: 30px; float: right;}
.active, .accordion:hover {
  background-color: #188aff; color:#fff
}
h4.active::after{ content:"-" ;  }
.panel { padding:15px; display:none;
  background-color: white; font-size:19px; line-height:33px;
  overflow: hidden;}
.skills ul{ padding:10px 15px; margin:0;}









#faq { margin:20px 0 50px 0 ; max-width:98% ; padding:20px 1%; box-shadow: 0 0 3px rgba(0,0,0,.2)}

#faq ul, #faq ol { margin:0; padding:0 0 0 30px;}
.ans h3{ text-align:left}
.transition, p, .panels i:before, .panels i:after {  transition: all 0.3s;}

#faq .no-select, #faq h4 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}



#faq h4 {
  color: #fff; background:#188aff; padding:15px; font-size:21px; line-height:28px; font-weight:500; display:block;  transition: 0.4s;
  cursor: pointer; margin:1px 0;
  cursor: pointer;
  transition: .2s;
}

#faq .ans {
  padding:15px; text-align: left;
  background-color: white; font-size:19px; line-height:33px;  
  position: relative;
  overflow: hidden;
  will-change: max-height;
  contain: layout;
  display: inline-block;
  opacity: 1;
  transform: translate(0, 0);
  transition: .3s opacity, .6s max-height;
  hyphens: auto;
  z-index: 2;
}


#faq .panels {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  /*padding-bottom: 4px;*/
  /*padding-top: 18px;*/
  background: #fff;
  -webkit-tap-highlight-color: transparent;
}
#faq .panels + li {
  margin-top: 15px;
}
#faq .panels:last-of-type {
  padding-bottom: 0;
}
#faq .panels i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 28px;
  right: 15px;
}
#faq .panels i:before, .panels i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
}
#faq .panels i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
#faq .panels i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#faq .panels input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  touch-action: manipulation;
}
#faq .panels input[type=checkbox]:checked ~ h4 {
 background:#dff2ff; color:#333; 
}
#faq .panels input[type=checkbox]:checked ~ .ans {
  /*margin-top: 0;*/
  max-height: 0;
  transition: .3s;
  padding:0;
  opacity: 0;
  /*transform: translate(0, 50%);*/
}
#faq .panels input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg); background: #666;
}
#faq .panels input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg); background: #666;
}














.news{ padding:50px 0}
.news h3{ font-size:24px; text-align: center; color:#1c7dc1}
.coming{ padding:100px 0; text-align: center; font-size:30px; }
.coming p{ font-size:17px; padding:15px 0 0 ; line-height:19px; }

#profile_new{ background:url(../images/bg_latest_profile.jpg) no-repeat center center; background-size: cover ; overflow:hidden }
#profile_new h2{ color:#fff; padding:40px 0 80px 0 ; text-shadow: 0 0 3px rgba(0,0,0,.3)}
#profile_new h5{ color:#fff; padding:40px 0 80px 0 ; text-shadow: 0 0 3px rgba(0,0,0,.3)}
#profile_new .view-first_b .mask{ background:none; color:#fff; font-size:21px; line-height:28px; text-align:center; text-shadow: 0 0 3px rgba(0,0,0,.3)}
.view-first_b { box-shadow: 0 0 3px rgba(0,0,0,.3)}
.service_webdesign{ padding:0px 0}
.left_menu{ float:left; width:20%; background:url(../images/bg_sub_menu.jpg) right repeat-y #fafafa; }
.left_menu ul{ list-style:none; padding:5px 0px;  }
.left_menu ul li{ padding:0px; padding-right:13px;   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out; opacity: 1;}
.left_menu ul li a{ padding:25px 15px 25px 60px; display:block; font-size:17px;  border-bottom:1px dotted #ccc;}

.left_menu ul li a{ background:url(../images/icon_webdesign_project.png) no-repeat; background-position:5px 50%;  }
.left_menu ul li + li a{ background:url(../images/icon_education_service.png) no-repeat; background-position:5px 50%;  }
.left_menu ul li + li + li a{ background:url(../images/icon_mobile_web_design.png) no-repeat; background-position:5px 50%;  }
.left_menu ul li + li + li + li a{ background:url(../images/icon_ecommerce.png) no-repeat; background-position:5px 50%;  }

.left_menu ul li a:hover, .left_menu ul li a.current{ color: #fff; }
.left_menu ul li:hover, .left_menu ul li.current{ background:url(../images/bg_menu_design_over.png) no-repeat center right; color:#fff }

.web_design_rightcontent{ float: right; width:78%; min-height:500px; padding-bottom:50px;}
.web_design_rightcontent h1{ font-size:36px; padding-top:15px;}
.web_design_rightcontent h2{color:#444; font-size:21px; margin-bottom:15px;}
.web_design_rightcontent h3{color:#444; font-size:21px; margin-bottom:15px;}
.web_design_rightcontent h4{color:#444; font-size:21px; margin-bottom:15px; border-bottom:1px dotted #ccc; margin-top:30px;}

.web_design_rightcontent p{color:#666; font-size:15px; }
.web_design_rightcontent .package_area{ float:left; width:49%; }
.web_design_rightcontent .package_area_right{ float: right; width:49%; }

.edication_reference{}
.edication_reference ul{ list-style:none; margin:0 0 0 -2%; padding:0;}
.edication_reference ul li{ float:left; width:48%; margin:0 0 20px 2%;}
.edication_reference ul li img{ width:100%; -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out; opacity: 1; }
.edication_reference ul li:hover img{ opacity:.7 }

.web_design_rightcontent .package{ padding:10px 15px; background:#f7fffd; border:1px solid #a6e6d9; margin:20px 0 }
.web_design_rightcontent .package ul{ padding-left:15px; }
.web_design_rightcontent .package li{ padding:3px 0; font-size:15px; }

.web_design_rightcontent .package_b{ padding:10px 15px; background:#eef9ff; border:1px solid #008ce2; margin:20px 0 }
.web_design_rightcontent .package_b ul{ padding-left:15px; }
.web_design_rightcontent .package_b li{ padding:3px 0; font-size:15px; }

.school_app{ width:40%; margin:0px auto;}
.school_app img{ max-width:100%;}

.erp_bg{background:url(../images/erp_bg.jpg) no-repeat center center; min-height: 240px; padding:120px 0; margin-top:25px;}
.erp_bg .package{ padding:10px 15px; background: rgba(0,0,0,.7); border:1px solid rgba(100%,100%,100%,.5); width:55%; margin:0px auto; }
.erp_bg .package ul{ padding-left:15px; }
.erp_bg .package li{ padding:3px 0; font-size:15px; color:#fff }

.photo_right{ float:right;}
.app_development img{ max-width:100%;}
.reference{ padding:30px 0px 50px 0;}
.reference ul{ list-style:none}
.reference ul li{ float: left; width:23%; margin:1%; position:relative;}
.reference ul li img{ width:100%; }
.new_ref{ position:absolute; right:0px; top:0px; width:75px; z-index:999} 

.edu_group{}
.edu_group ul{ list-style:none; margin:0px; padding:0px; }
.edu_group ul li{ float:left; width:33.3%; margin-bottom:0px;}
.edu_group ul li img{ width:100%;border-right:1px solid #ddd;border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-top:1px solid #ddd;}

.mobile_design{ margin:15px 0px 50px 0}
.mobile_design img{ width:100%; }
.quotation{ padding:0px 0px 50px 0px;}
.quotation p{ font-size:15px;}

.banner_pp{ position:absolute; left:30px; bottom:80px; }


.inner_banner .Orange_quote{ position:absolute; left:30px; bottom:80px; }
.inner_banner .PinkContact{ position:absolute; left:30px; bottom:80px; }
.inner_banner .Pruple_banner{ position:absolute; left:30px; bottom:80px; }
.inner_banner .blueabout{ position:absolute; left:30px; bottom:80px; }
.greenlight{ position:absolute; left:30px; bottom:80px;  left:50%;transform: translateX(-50%);}



.inner_banner .blacktitle{ position:absolute; left:30px; bottom:80px; }
.inner_banner .blueabout p{ background:url(../images/icon_about_home.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#2f8ace}
.greenlight p{ padding:0px 0px; line-height:66px; max-height:0px  auto;  font-size:33px; color:#fff ;}
.inner_banner .blacktitle p{ background:url(../images/icon_reference.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#fff}
.inner_banner .PinkContact p{ background:url(../images/icon_contact_tel.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#ff557f}
.inner_banner .Orange_quote p{ background:url(../images/icon_getaquote.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#ff7200}
.inner_banner .Pruple_banner p{ background:url(../images/icon_knowledge.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#fff}

.edu_grad{ background:url(../images/icon_green_edu.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#5bb9a6}
.mobile_version{ background:url(../images/icon_green_mobile.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#5bb9a6}
.icon_cart{ background:url(../images/icon_cart.png) no-repeat left center; padding:0px 0px 0px 60px; line-height:66px;  font-size:33px; color:#5bb9a6}



.blue  .webdesign_title h1{color:#2f8ace;}
.green .web_design_rightcontent h1{color:#0d9880; }
.blue{ border:6px solid #268dd9; }
.blue .footer{ background:#268dd9;}
.blue .inner_banner { background:#edf8f9;}

.inner_banner .ctd {height:300px; }

.blue .inner_banner .ctd { position:relative; background:url(../images/banner_city.png) no-repeat right bottom;  }
.green .inner_banner,.green .inner_banner2 , .green .inner_banner3, .green .inner_banner4 { background:#f3fdf1;}
.green .inner_banner .ctd ,.green .inner_banner2 .ctd  , .green .inner_banner3 .ctd , .green .inner_banner4 .ctd  { height:300px; }


.green .inner_banner .ctd { position:relative; background:url(../images/bg_webdesign_project.png) no-repeat right bottom; }
.green .inner_banner2  { background:url(../images/bg_webdesign_teams.jpg) no-repeat center center ; }
#banner_school  { background:url(../images/bg_webdesign_school.jpg) no-repeat center center ; }
#banner_ngo  { background:url(../images/bg_webdesign_ngo.jpg) no-repeat center center ; }
#banner_business  { background:url(../images/bg_business.jpg) no-repeat center center ; }
#bg_webdesign_server{ background:url(../images/bg_webdesign_server.jpg) no-repeat center center ; }
#bg_notfound { background:url(../images/bg_404.jpg) no-repeat center center ; }
#bg_notfound .ctd{ background:none}

.table_server{ box-shadow:0 0 5px rgba(0,0,0,.2); padding:15px; margin-bottom:100px; width: calc(100% - 30px); display:inline-block}
.table_server table tr:nth-child(1) td{ background:#2f8e80; color:#fff;}


#ngo_design{ background:none}

.green .inner_banner2 .ctd { position:relative;  }
.green .inner_banner3 .ctd { position:relative; background:url(../images/bg_mobile.png) no-repeat right bottom ; }
.green .inner_banner4 .ctd { position:relative; background:url(../images/bg_mrp.png) no-repeat right bottom ;}

.green .webdesign_title h1{color:#298321;}
.green { border:6px solid #298321; }
.green .footer{ background:#298321;}

.black { border:6px solid #666; }
.black .footer{ background:#000;}
.black .inner_banner { background:#000;}
.black .inner_banner .ctd { position:relative; background:url(../images/night.png) no-repeat right bottom ;}

.black  .webdesign_title h1{color:#000; }
.lv_3_title{ padding:5px 0px 15px; color:#333;}
.orange { border:6px solid #ff7200; }
.orange .footer{ background:#ff7200;}
.orange .inner_banner { background:#ffeed4;}
.orange .inner_banner .ctd { position:relative; background:url(../images/banner_sofa.png) no-repeat right bottom ;}
.orange  .webdesign_title h1{color:#ff7200;}

.pink { border:6px solid #ff557f; }
.pink .footer{ background:#ff557f;}
.pink .inner_banner { background:#fff6f8;}
.pink .inner_banner .ctd { position:relative; background:url(../images/bgcontactus.png) no-repeat right bottom ;}
.pink  .webdesign_title h1{color:#ff557f;}

.pruple { border:6px solid #72519f; }
.pruple .footer{ background:#72519f; color:#fff;}
.pruple .inner_banner { background:#72519f;}
.pruple .inner_banner .ctd { position:relative; background:url(../images/bgknowledge.png) no-repeat right bottom ;}
.pruple  .webdesign_title h1{color:#72519f;}

.office_area{ background: url(../images/bg-contactus.jpg) center; color:#fff; font-size:17px; background-size:cover; }
.office_area .contact_info{ padding:20px 0px; float:right; width:50%; background:url(../images/bg_contact_half.png);}
.office_area .contact_info ul { margin-left:20px; list-style:none; padding:15px 0 15px;}

.office_area .contact_info ul li{ padding:0px; color:#333; font-size:15px; padding:10px 0px 10px 20px;}
.office_area .contact_info ul li a{ color:#ff557f; text-decoration:underline}
.office_area .contact_info ul li a:hover{ color:#333; text-decoration: none}
.tel{ background:url(../images/icon-tel.png) no-repeat top left; padding:0px 0px 0px 45px; line-height:32px;}
.email{ background:url(../images/icon_email.png) no-repeat top left; padding:0px 0px 0px 45px; line-height:32px; }
.openhour{ background:url(../images/icon_openhour.png) no-repeat top left; padding:0px 0px 0px 45px; line-height:32px;}
.address{ background:url(../images/icon_address.png) no-repeat top left; padding:0px 0px 0px 45px; line-height:19px; }
.wtapps{ color:#2eb743}
.maparea{ box-shadow:0px 0px 3px #ccc; margin:30px 15px 50px 15px; padding:2px;}
.maparea iframe{ width:100%; height:450px;} 
.office_area img{ float:left; margin:0px 20px 0px 20px;}
.office_area p{ padding:35px 20px 0 0;}

.map{ padding:30px 0}
.map h3{ font-size:24px; text-align: center; color:#ff557f}

.cd-top {
  display: inline-block;
  height: 55px;
  width: 99px;
  position: fixed;
  bottom: 60px;
  right: 5%;
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap; 
  visibility: hidden;
opacity: .7;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}

.blue .cd-top{  background: url(../images/toptop_blue.png) no-repeat; }
.black .cd-top{  background: url(../images/toptop_black.png) no-repeat; }
.green .cd-top{  background: url(../images/toptop_green.png) no-repeat; }
.orange .cd-top{  background: url(../images/toptop_orange.png) no-repeat; }
.pink .cd-top{  background: url(../images/toptop_pink.png) no-repeat; }

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  opacity: 1;
}

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 1;
}

.web_style h1, .web-cms h2,.web_cs h3 { color:#000; font-size:38px; display:grid; text-transform: uppercase; }
.trynow .title_quote , .trynow h5{ color:#fd1b90; font-size:38px; display:grid; text-transform: uppercase; padding:30px 0; }


.web_style h1 span, .web-cms h2 span, .web_style h2 span, .web_cs span , .web_style_title span{ color:#fe1079; font-size:21px; padding:10px 0 ; display:block; font-weight:400; }
.web_style h1 span{ color:#00ade2}
.web_cs h3 { color:#fff}
.web_cs span{ color:#cbff0f}

.web_style{ padding:50px 0;}

.web_style_des { color:#333; font-size:21px; line-height:32px; padding:30px ; font-weight:normal; } 
.web_style_des_b { color:#333; font-size:21px; line-height:32px; padding:30px ; font-weight:normal; background:#f9fff8; border-top:1px solid #298321;border-bottom:1px solid #298321; margin:15px 0 0px 0; text-align: center ; display: inline-block; width:calc( 100% - 60px )} 

.web_style_sub_title { color:#000; text-align: center; font-size:21px; padding:30px 0; font-weight:normal} 

.web_style_title{ margin:0px auto; text-align:center; }
.web-style ul{ list-style: none; margin:0; padding:0}
.web-style ul li{ float: left; width:33.33%}
.web-style ul li img{width:100%}

.web-style h4 { color:#000; font-size:19px;  font-weight:normal; text-align:center; z-index:1 }


.web-style .desc { position: relative; padding:20px 0; max-width:80%; margin-top:30px ;}
.web-style h3 {
    box-sizing: border-box;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
    text-align: center;
    line-height: 28px; font-size:24px; padding:0;
}
.web-style ul li .desc::before {
  content: ''; text-align:center;
  display: block;
  background: rgb(145,205,239);
  top: 0; right: 0; bottom: 0; left: 0;
  position: absolute; 
  z-index: 1;
  transform: rotate(-1deg) skew(-5deg, -3deg);
}
.web-style ul li .desc::before {background:#ff9b00;}
.web-style ul li+li .desc::before {background:#0081ba;}
.web-style ul li+li+li .desc::before {background:#db3626;}

#school_faq{ margin:50px 0 0 0; border-top:1px solid #ddd; padding:30px 0 ; }
.school_ans{ width:80%; box-shadow: 0 0 3px rgba(0,0,0,.2); margin:0px auto; margin-bottom: 50px; padding:2%;}
#school_faq h2{ padding-bottom:60px ;}


.web-cms{ background:#ececec; padding:30px 0;}

.cms_basic_function{  background:#fff; overflow:hidden; border-radius:8px; box-shadow: 0 0 8px rgba(0,0,0,.2)}

.cms_basic_function ul{ list-style:none; margin:0; padding:0;}

.cms_basic_function ul li{ float:left; width: calc(20% - 1px); border-left:1px solid #eff2f5; border-bottom:1px solid #eff2f5; font-size:16px; text-align: center; padding:15px 0;}
.cms_basic_function ul li span { display:block; padding:0 0 5px 0}


.cms_expert_function{ }
.cms_expert_function ul{ list-style:none; margin:0; padding:0;}
cms_expert_function ul li a  { color:#F90}
.cms_expert_function ul li{ float:left; display:flex; position:relative; align-items: center; width: 31%; margin-bottom:15px; font-size:16px; text-align: left; padding:12px 0; background:#fff; border-radius:8px; box-shadow: 0 0 8px rgba(0,0,0,.2)}

.cms_expert_function ul li:nth-child(3n+1){clear:both}

.cms_expert_function ul li span { float:left; padding:0 10px; text-align:center; font-size:28px; }
.cms_expert_function ul li p { font-size:21px; line-height:26px; }
.cms_expert_function ul li:nth-child(2){ margin:0 3.5%}
.cms_expert_function ul li:nth-child(5){ margin:0 3.5%}
.cms_expert_function ul li div{ margin:0 0px;}

.web_function_details{ font-size:23px; padding:50px 0; text-align:center ; font-style:italic; color:#F03}
.inquiry_box{ margin:0px auto; text-align: center; margin-bottom:50px;}
.inquiry_box a{ font-size:21px; display: inline-block; padding:15px 50px; color:#333 ;  background: linear-gradient(to left, #fcf76a 50%, #fe137f 50%); background-size: 200% 100%; background-position: right bottom;  transition: all .5s ease-out;  }
.inquiry_box a:hover { background-position: left bottom; color:#fff;}


.web_cs{background: url(../images/bg_beauty_teacher.jpg) no-repeat top; min-height:550px; padding:50px 0  }
.web_cs .web_style_des { color:#fff; padding-bottom:50px;}
.web_cs h6{  text-align: center; font-size:23px; padding:50px 0 20px 0; } 
.web_cs_content{ margin: 50px 0}
.web_cs_content .cs1 { position:relative; border:3px solid #cbff0f; width: calc(40% - 46px); margin:0 5%; padding:20px ; background:#fff; border-radius:8px; float:left; }
.web_cs_content .cs1 ul { background:#cbff0f; padding:15px; border-radius:8px; list-style:none; }
.web_cs_content .cs1 ul li{ text-align: center; font-size:17px; line-height:33px; background:#fff; margin:2px 0 } 

.cs_icon{ position:absolute; left:50%;transform: translateX(-50%); top:-50px;} 
.cs_icon span{ background:#cbff0f; border-radius:50%; display:block; margin:0; padding:0 }
.cs2_icon{ position:absolute; left:50%;transform: translateX(-50%); top:-50px;} 
.cs2_icon span{ background:#5a2f85; border-radius:50%; display:block; margin:0; padding:0 }

.web_cs_content .cs2 { position:relative; border:3px solid #5a2f85; width: calc(40% - 46px); margin:0 5%; padding:20px ; background:#fff; border-radius:8px; float:right; }
.web_cs_content .cs2 ul { background:#5a2f85; padding:15px; border-radius:8px; list-style:none; }
.web_cs_content .cs2 ul li{ text-align: center; font-size:17px; line-height:33px; background:#fff; margin:2px 0 } 

.business_plan{ margin:50px 0 0 ;}
.business_plan ul{ list-style:none; margin:0; padding:0}
.business_plan ul li{ clear:both; margin:0; padding:0;display: flex; align-items: center; font-size:19px; line-height:28px; }
.business_plan ul li+li{  flex-flow:row-reverse}
.business_plan  ul li .business_photo { width:50%;}
.business_plan  ul li .business_des { width:46%; padding:0 2%;}

.business_plan  ul li .business_photo img { width:100%;}

.business_plan h3, .business_plan h4 { padding:0 0 30px 0;}

.trynow{ background:#282c39; padding:50px 0;}
.trynow h6 { color:#fd1b90;}
.trynow .web_style_des{ color:#fff;}
.trynow .web_style_des span a{ color:#ffeb38 }
.inquiry_msg{ padding:30px 0; display:inline-flex;}

#online_cs, #wtapp_cs { margin:0 10px; }

.inquiry_msg a{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1;}

#online_cs a{ border-radius:24px; padding:10px 40px; color:#fd1f99; border:2px solid #fd1f99; background:#fff; font-size:17px; line-height:23px; }
#wtapp_cs a{ border-radius:24px; padding:10px 40px; color:#000; border:2px solid #000; background:#cbff0f; font-size:17px; line-height:23px; }


#online_cs a:hover{  color:#333;  background:#fd1f99; border:2px solid #fff}
#wtapp_cs a:hover{  color:#52cf14;  background:#fff; border:2px solid #52cf14; } 

.ctd_bottom{ padding:50px 0; background:#fafafa}
.ctd_footer_contact{ float:left; width:35%; border-right:1px dotted #ddd;}
.ctd_footer_contact ul{ list-style:none; margin:0 0 0 5px; padding:0;}
.ctd_footer_contact ul li{ margin:5px 0;}
.ctd_footer_contact span{ color:#015aa9; padding-right:10px; }

.site-map{ float:right; width:62%}
.site-map ul{ list-style:none; margin:0; padding:0;}
.site-map ul li{ margin:5px 0; float:left; width:18%; margin:0 1% 15px 1%; }
.site-map ul li a{ color:#015aa9; border-bottom:1px solid #015aa9; font-size:16px; line-height:21px; text-align: left; font-weight:400; display:block }
.site-map ul li a:hover{ color:#ffa200; }
.site-map ul li ul{ list-style: outside; margin:10px 0 0 15px; padding:0;}
.site-map ul li ul li{ margin: 0; padding:5px 0; float:left; width:100%;}
.site-map ul li ul li a{ color:#333; border-bottom:0px solid #015aa9; text-decoration: none ; line-height:19px;  font-size:15px; font-weight:100; }

.ctd_bottom .logo{ margin:0 0 10px 0}

#notfound { min-height:600px; display:flex; align-items:center}
#notfound  p{ font-size:30px;  line-height:36px; width:100%; text-align: center;}


.pruple h2{ font-size:22px; line-height:30px;}
.pruple h3{ font-size:20px; line-height:30px; padding:0; margin:0}

.pruple .artical{ min-height:450px; padding:0 0 50px }
.pruple .artical ul {
  display: grid; padding:0px 5%; margin:0;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px; list-style:none;
}

.pruple .artical ul li {
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
  align-items: center;
  text-align: center;
}

.pruple .artical ul li img {
  max-width: 100%; 
  border: 2px solid #fff; 
  box-shadow: 0 0 5px rgba(0, 0, 0, .2);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加平滑動畫 */
}

.pruple .artical ul li:hover img { 
  transform: scale(1.1); /* 圖片放大效果 */
  opacity: .8; 
  border: 2px solid #fff; 
  box-shadow: 0 0 10px rgba(0, 0, 0, .5); /* 調整陰影 */
}

.pruple .artical ul li:hover { 
  text-decoration: underline; 
  color: #72519f
}
.pruple .artical ul li:hover h3 { 
  text-decoration: underline; 
  color: #72519f
}

#related_title{ font-size:30px; line-height:40px; text-align: left; color:#72519f; border-bottom:1px solid #ddd; margin-bottom:10px; }
.related_artical{ float:right; width:20%; padding:100px 0 20px 0}

.related_artical ul { list-style:none; margin:0; padding:5px 0; }
.related_artical ul li {  position: relative;  width: 100%; transition: all 0.3s ease-in-out; padding:10px 0; border-radius:16px;}
.related_artical ul li:nth-child(even){ background:#f5f5f5;  }
.related_artical ul li {padding:15px 0; }
.related_artical ul li  a{ display: block; height:100%;  display: flex;  align-items: center; color:#333; }
.related_artical ul li img{ float: left; width:35%; border-radius:8px;  overflow:hidden }
.related_artical ul li h3{ float: right; width:62%; padding-left:3%; position:relative; height:100%; text-align:left; font-size:13.5px; line-height:15px }
.related_artical ul li:hover{ background:#e0d1f5; padding:15px 0; }

article{ padding:0px 0 50px 0;  margin-bottom:20px;  text-align:left; float:left; width:75%; text-align: left; line-height:32px; font-size:16.5px}
article ul, article ol{ padding: 10px 0 10px 30px }
article h1, article h2, article h3, article h4, article p { text-align: left}
article h1, article h2{ margin:0 0 15px 0; padding:10px 0}
article h2, article strong{ font-weight:600; color:#72519f;}
article h3{margin-bottom:10px !important; font-weight:600; font-size:27px !important}
article h4{ font-size:22px; line-height:30px; margin:15px 0; padding:0; color:#333;}
article img{ max-width:100%}
article table{ width:55%}
article .time{ border-bottom:1px solid #ddd; }
article a , article a:visited{ text-decoration: underline !important ; color:#ff557f }
article a:hover { text-decoration: none !important; color:#72519f}
article .imgcenter{ width:65%; padding:20px 0; margin:0 auto; text-align:center;}

#outsidelink a{
   display: inline-block;
   text-decoration: none; font-size:15px;
   padding: 2px 10px 2px 35px;
   background: url(../images/btn_launch.png) no-repeat #72519f;
   background-position:10px 50%;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #ccc;
   -moz-box-shadow: 0 0 1px #ccc;
   box-shadow: 0 0 1px #ccc;
}
#outsidelink  a:hover {
	background: url(../images/btn_launch.png) no-repeat #333;
   background-position:10px 50%;
}

#banner_top{ width:100%; margin-bottom:15px;}
#right_img{ float:right ; width:40%; margin:0 0 30px 30px; text-align:right;}
.breadcrumb {
  overflow: auto; background:rgba(204,204,204,.2); border-radius:16px; box-shadow:0 0 5px rgb(0,0,0,.2); margin:20px 0;
  -webkit-overflow-scrolling: touch; font-size:15px; display: inline-block; padding:0 15px;
}
.breadcrumb ol  {
    overflow: visible; padding:0px;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-block-end: 0;
    padding-inline-start: 0;
    white-space: normal;white-space: nowrap; 
    overflow-x: auto;
  }
.breadcrumb ol li {
  display: inline-block;
  color: #666;
}
.breadcrumb ol li a{color:#72519f;}
.breadcrumb ol li a:hover{ text-decoration: underline; color:#333;}

.breadcrumb ol li:nth-child(n + 2)::before {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 1rem 1.25rem;
  content: "";
  transform: rotate(45deg); /* LTR */
  border-block-start: 2px solid #666;
  border-inline-end: 2px solid #666;
}

.breadcrumb__item:last-child {
  margin-inline-end: var(--sp3);
}

.highlight_color{ color:#df2d6b; font-weight:600}