@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


@media screen and (min-width: 1370px) {

  /************ header + nav ************/

  header { width: 100%; height: 120px; padding: 0 calc(50% - 650px); box-sizing: border-box; border-bottom: 6px #262626 solid; background-image: url("../images/header_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 340px;}
  .header-logo img { width: 90%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 340px - 140px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 40px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0 20px; margin: 0;}
  nav#pc ul.nav-menu li a { color: #fff; font-size: 1rem; text-decoration: none; transition: 0.3s;}
  nav#pc ul.nav-menu li a:hover { color: #cacacb;}

  .header-lang-box-mo { display: none;}
  .header-lang-box { width: 140px; color: #fff; font-size: 0.8rem; display: flex; justify-content: flex-start; align-items: center;}
  .header-lang-box a { padding: 3px 10px; color: #fff; text-align: center; text-decoration: none; box-sizing: border-box; border-radius: 14px; border: 1px transparent solid; display: block; transition: 0.5s;}
  .header-lang-box a:hover { border: 1px #fff solid;}
  .header-lang-box a.sel { color: #229560; font-weight: 500; background-color: #fff;}


  /************ index-banner ************/

  .index-banner-box { clear: both; width: 100%; height: 36.5vw; overflow: hidden;}
  .index-banner-box img { width: 100%; height: auto;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 100px calc(50% - 650px) 60px calc(50% - 650px); box-sizing: border-box; background-color: #3b3737;}

  .index-news-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-news-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-news-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-news-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-news-list .news-box { width: calc(100% / 3 - 40px); margin: 0 20px 40px 20px;}
  .index-news-list .news-box .pic { width: 100%; border-bottom: 5px #229560 solid;}
  .index-news-list .news-box .pic img { width: 100%; height: auto;}
  .index-news-list .news-box .date { width: 100%; padding: 10px 0; color: #ccc; font-size: 1rem;}
  .index-news-list .news-box .title { width: 100%; color: #fff; font-size: 1.2rem; font-weight: 500; text-decoration: none;}
  .index-news-list .news-box .read-more { width: 100%; margin: 40px 0 0 0;}
  .index-news-list .news-box .read-more a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-news-list .news-box .read-more a:hover { color: #fff;}


  ul#page-number-box { clear: both; width: 100%; padding: 0; margin: 50px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#page-number-box li { padding: 0; margin: 10px 5px;}
  ul#page-number-box li a { padding: 5px 10px; color: #fff; font-size: 1.1rem; border: 1px transparent solid; text-decoration: none; display: block;}
  ul#page-number-box li a:hover { border: 1px #229560 solid;}
  ul#page-number-box li a.sel { color: #fff; border: 1px #229560 solid; background-color: #229560;}


  .page-news-content { clear: both; width: 100%;}
  .page-news-content .news-title { width: 100%; color: #000; font-size: 1.2rem; font-weight: 500;}
  .page-news-content .news-date { width: 100%; padding: 20px 0; color: #000; font-size: 1rem; text-align: right;}
  .page-news-content .news-content { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto; margin: 20px 0;}
  
  .back-bt { clear: both; width: 100%; margin: 40px 0 0 0;}
  .back-bt a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .back-bt a:hover { color: #fff;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .index-about-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-about-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-about-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-about-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .index-about-content .about-text { width: 37%; color: #fff; font-size: 1.2rem; font-weight: 300; line-height: 2em;}
  .index-about-content .about-pic { width: 37%; padding: 0 0 0 40px; box-sizing: border-box;}
  .index-about-content .about-pic img { width: 100%; height: auto;}
  .index-about-content .about-more-bt { width: 26%;}
  .index-about-content .about-more-bt .read-more { width: 120px; margin: 0 auto;}
  .index-about-content .about-more-bt .read-more a { width: 100%; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-about-content .about-more-bt .read-more a:hover { color: #fff;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-color: #3b3737;}

  .index-service-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-service-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-service-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-service-items { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch;}
  .index-service-items .serv-item-box { width: 300px; height: 300px; margin: 0 40px; border-radius: 100%; background-color: #ddd; overflow: hidden;}
  .index-service-items .serv-item-box .icon { width: 100%; height: 180px; margin: 20px 0 0 0; color: #229560; font-size: 6rem; display: flex; justify-content: center; align-items: center;}
  .index-service-items .serv-item-box .title { width: 100%; color: #229560; font-size: 1.2rem; font-weight: 300; text-align: center;}

  .index-ser-read-more { clear: both; width: 100%; margin: 80px 0 0 0;}
  .index-ser-read-more a { width: 120px; padding: 10px 0; margin: 0 auto; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-ser-read-more a:hover { color: #fff;}


  /************ section #index-collaboration ************/

  section#index-collaboration { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-color: #4f4f4f;}

  .index-collaboration-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-collaboration-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-collaboration-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-collaboration-pro { clear: both; width: 100%;}
  .index-collaboration-pro .slider-for { margin: 0 0 30px 0;}
  .index-collaboration-pro .slider-for .pro-big-pic { width: 80%; height: 600px; margin: 0 auto; box-sizing: border-box; border-radius: 30px; background-color: #fff; overflow: hidden;}
  .index-collaboration-pro .slider-for .pro-big-pic a { width: 100%; height: 100%; padding: 40px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-collaboration-pro .slider-for .pro-big-pic img { width: auto; height: 90%;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title { width: 100%; padding: 20px 0 0 0; text-align: center;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title span { padding: 5px 20px; color: #fff; font-size: 1.2rem; font-weight: 500; border-radius: 20px; background-color: #229560;}
  .index-collaboration-pro .slider-nav .pro-pic { height: 200px; margin: 0 10px; border-radius: 20px; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-collaboration-pro .slider-nav .pro-pic img { width: auto; height: 100%;}


  .page-collaboration-intro { clear: both; width: 80%; margin: 0 auto 60px auto; display: flex; justify-content: center; align-items: center;}
  .page-collaboration-intro .logo { width: 420px;}
  .page-collaboration-intro .logo img { width: 300px; height: auto;}
  .page-collaboration-intro .intro { width: calc(100% - 420px); color: #000; font-size: 1.2rem; font-weight: 300; line-height: 2em;}

  .page-collaboration-list-full { clear: both; width: 100%; padding: 60px 0 0 0; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-collaboration-list-full a { width: calc(100% / 6 - 40px); margin: 0 20px 40px 20px; display: block;}
  .page-collaboration-list-full a img { width: 100%; height: auto;}

  .page-collaboration-con { clear: both; width: 100%; margin: 40px 0 0 0;}
  .page-collaboration-con .text-intro { width: 100%; margin: 0 0 40px 0; color: #000; font-size: 1.1rem; line-height: 2em; text-align: center;}
  .page-collaboration-con .pro-list { width: 100%; padding: 40px; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-collaboration-con .pro-list .px300 { width: 300px; margin: 20px;}
  .page-collaboration-con .pro-list .px500 { width: 500px; margin: 20px;}
  .page-collaboration-con .pro-list .px300 img, 
  .page-collaboration-con .pro-list .px500 img { width: 100%; height: auto;}
  .page-collaboration-con .pro-list .px300 .text, 
  .page-collaboration-con .pro-list .px500 .text { width: 100%; padding: 5px 10px; color: #229560; font-size: 1.2rem; font-weight: 500; text-align: center; box-sizing: border-box;}


  /************ section #index-agent-brand ************/

  section#index-agent-brand { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-color: #3b3737;}

  .index-brands-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-brands-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-brands-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-brands-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box { width: calc(100% / 5 - 40px); margin: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box img { width: 90%; height: auto; margin: 0 auto; transition: 0.5s;}
  .index-brands-list .brand-box img:hover { width: 98%; height: auto;}


  .page-brand-con { clear: both; width: 100%; padding: 60px 40px; margin: 0 0 60px 0; box-sizing: border-box; background-color: #fff;}
  .page-brand-con img.brand-title { width: auto; height: 120px; margin: 0 auto;}
  .page-brand-con .brand-url { clear: both; width: 100%; padding: 20px 0 60px 0; color: #229560; font-size: 1.1rem; text-align: center;}
  .page-brand-con .brand-url a { color: #229560; text-decoration: none;}
  .page-brand-con .brand-url a:hover { border-bottom: 1px #229560 solid;}
  .page-brand-con .brand-intro { clear: both; width: 80%; margin: 0 auto; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-brand-con .brand-intro img.photo-pro { clear: both; max-width: 100%; height: auto; margin: 40px auto 0 auto;}


  /************ section #index-channel ************/

  section#index-channel { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-color: #4f4f4f;}

  .index-channel-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-channel-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-channel-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-channel-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-channel-list .channel-box { width: calc(100% / 8 - 30px); margin: 15px; border-radius: 20px; background-color: #fff; overflow: hidden;}
  .index-channel-list .channel-box a { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .index-channel-list .channel-box img { width: 100%; height: auto; margin: 0 auto; transition: 0.5s;}


  /************ section #index-videos ************/

  section#index-videos { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-color: #3b3737;}

  .index-videos-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-videos-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-videos-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-video-list { clear: both; width: 75%; margin: 0 auto;}
  .index-video-list .video-for { margin: 0 0 30px 0;}
  .index-video-list .video-for .video-big { width: 100%; padding: 30px 0; margin: 0 auto; box-sizing: border-box; border-radius: 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden;}
  .index-video-list .video-nav .video-pic { height: 200px; margin: 0 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-video-list .video-nav .video-pic img { width: auto; height: 100%;}


  .index-videos-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .index-videos-full .video-box { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%;}
  .page-banner-box img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; padding: 100px calc(50% - 650px); box-sizing: border-box; background-color: #cacacb; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

  .page-contact-title { clear: both; width: 100%; margin: 0 0 60px 0; text-align: center;}
  .page-contact-title span.bigger { color: #000; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .page-contact-title span.smaller { color: #229560; font-size: 1.4rem;}

  .page-contact-col-lf { width: 30%; padding: 0 40px 0 0; box-sizing: border-box;}
  .page-contact-col-lf span.company-name { padding: 0 0 5px 0; color: #229560; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #229560 solid;}
  .page-contact-col-lf span.company-infor { color: #000; font-size: 1.2rem; line-height: 2em; word-wrap: break-word; word-break: break-all;}
  .page-contact-col-lf img.contact-pic { width: 100%; height: auto; margin: 20px 0 0 0;}

  .page-contact-col-rt { width: 40%; padding: 0 0 0 40px; color: #000; box-sizing: border-box;}
  .page-contact-col-rt input[type=text], 
  .page-contact-col-rt input[type=tel], 
  .page-contact-col-rt input[type=email] { width: 90%; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt textarea { width: 90%; height: 140px; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt input[type=button] { margin: 30px 0 0 0; padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #229560; cursor: pointer;}


  /************ site map ************/

  ul.page-sitemap-con { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-sitemap-con li { padding: 0; margin: 10px 20px;}
  ul.page-sitemap-con li a { color: #000; font-size: 1.4rem; text-decoration: none;}
  ul.page-sitemap-con li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error404-con { clear: both; width: 100%; padding: 40px 0; text-align: center;}
  .page-error404-con span.text-con { color: #000; font-size: 1.4rem; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 1.2rem; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #229560; border-bottom: 1px #229560 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 60px calc(50% - 650px); box-sizing: border-box; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .footer-logo { width: 400px;}
  .footer-logo img { width: 90%; height: auto;}

  ul.footer-nav { width: calc(100% - 800px); padding: 0; margin: 0; list-style: none; display: block;}
  ul.footer-nav li { width: 100%; padding: 0; margin: 15px 0; text-align: center;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none; transition: 0.3s;}
  ul.footer-nav li a:hover { color: #cacacb;}

  .footer-contact { width: 400px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-contact .caption { width: 60px; margin: 0 0 30px 0;}
  .footer-contact .caption img { width: 30px; height: auto;}
  .footer-contact .column { width: calc(100% - 60px); margin: 0 0 30px 0; color: #fff; font-size: 1.1rem; line-height: 1.4em; word-wrap: break-word; word-break: break-all;}


  .footer-login { clear: both; width: 100%; font-size: 1rem; text-align: right;}
  .footer-login a { color: rgba(255,255,255,0.2); text-decoration: none;}


}

@media screen and (min-width: 1024px) and (max-width: 1369px) {

  /************ header + nav ************/

  header { width: 100%; height: 120px; padding: 0 calc(50% - 500px); box-sizing: border-box; border-bottom: 6px #262626 solid; background-image: url("../images/header_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 240px;}
  .header-logo img { width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 240px - 130px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0 10px; margin: 0;}
  nav#pc ul.nav-menu li a { color: #fff; font-size: 0.95rem; text-decoration: none; transition: 0.3s;}
  nav#pc ul.nav-menu li a:hover { color: #cacacb;}

  .header-lang-box-mo { display: none;}
  .header-lang-box { width: 130px; color: #fff; font-size: 0.8rem; display: flex; justify-content: flex-start; align-items: center;}
  .header-lang-box a { padding: 3px 10px; color: #fff; text-align: center; text-decoration: none; box-sizing: border-box; border-radius: 14px; border: 1px transparent solid; display: block; transition: 0.5s;}
  .header-lang-box a:hover { border: 1px #fff solid;}
  .header-lang-box a.sel { color: #229560; font-weight: 500; background-color: #fff;}


  /************ index-banner ************/

  .index-banner-box { clear: both; width: 100%; height: 36.5vw; overflow: hidden;}
  .index-banner-box img { width: 100%; height: auto;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 100px calc(50% - 480px) 60px calc(50% - 500px); box-sizing: border-box; background-color: #3b3737;}

  .index-news-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-news-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-news-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-news-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-news-list .news-box { width: calc(100% / 3 - 40px); margin: 0 20px 40px 20px;}
  .index-news-list .news-box .pic { width: 100%; border-bottom: 5px #229560 solid;}
  .index-news-list .news-box .pic img { width: 100%; height: auto;}
  .index-news-list .news-box .date { width: 100%; padding: 10px 0; color: #ccc; font-size: 1rem;}
  .index-news-list .news-box .title { width: 100%; color: #fff; font-size: 1.2rem; font-weight: 500; text-decoration: none;}
  .index-news-list .news-box .read-more { width: 100%; margin: 40px 0 0 0;}
  .index-news-list .news-box .read-more a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-news-list .news-box .read-more a:hover { color: #fff;}


  ul#page-number-box { clear: both; width: 100%; padding: 0; margin: 50px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#page-number-box li { padding: 0; margin: 10px 5px;}
  ul#page-number-box li a { padding: 5px 10px; color: #fff; font-size: 1.1rem; border: 1px transparent solid; text-decoration: none; display: block;}
  ul#page-number-box li a:hover { border: 1px #229560 solid;}
  ul#page-number-box li a.sel { color: #fff; border: 1px #229560 solid; background-color: #229560;}


  .page-news-content { clear: both; width: 100%;}
  .page-news-content .news-title { width: 100%; color: #000; font-size: 1.2rem; font-weight: 500;}
  .page-news-content .news-date { width: 100%; padding: 20px 0; color: #000; font-size: 1rem; text-align: right;}
  .page-news-content .news-content { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto; margin: 20px 0;}
  
  .back-bt { clear: both; width: 100%; margin: 40px 0 0 0;}
  .back-bt a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .back-bt a:hover { color: #fff;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 100px calc(50% - 460px); box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .index-about-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-about-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-about-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-about-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .index-about-content .about-text { width: 50%; color: #fff; font-size: 1.2rem; font-weight: 300; line-height: 2em;}
  .index-about-content .about-pic { width: 37%; padding: 0 0 0 40px; box-sizing: border-box;}
  .index-about-content .about-pic img { width: 100%; height: auto;}
  .index-about-content .about-more-bt { width: 26%;}
  .index-about-content .about-more-bt .read-more { width: 120px; margin: 0 auto;}
  .index-about-content .about-more-bt .read-more a { width: 100%; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-about-content .about-more-bt .read-more a:hover { color: #fff;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 100px calc(50% - 500px); box-sizing: border-box; background-color: #3b3737;}

  .index-service-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-service-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-service-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-service-items { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch;}
  .index-service-items .serv-item-box { width: 240px; height: 240px; margin: 0 20px; border-radius: 100%; background-color: #ddd; overflow: hidden;}
  .index-service-items .serv-item-box .icon { width: 100%; height: 140px; margin: 20px 0 0 0; color: #229560; font-size: 6rem; display: flex; justify-content: center; align-items: center;}
  .index-service-items .serv-item-box .title { width: 100%; color: #229560; font-size: 1.2rem; font-weight: 300; text-align: center;}

  .index-ser-read-more { clear: both; width: 100%; margin: 80px 0 0 0;}
  .index-ser-read-more a { width: 120px; padding: 10px 0; margin: 0 auto; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-ser-read-more a:hover { color: #fff;}


  /************ section #index-collaboration ************/

  section#index-collaboration { clear: both; width: 100%; padding: 100px calc(50% - 500px); box-sizing: border-box; background-color: #4f4f4f;}

  .index-collaboration-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-collaboration-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-collaboration-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-collaboration-pro { clear: both; width: 100%;}
  .index-collaboration-pro .slider-for { margin: 0 0 30px 0;}
  .index-collaboration-pro .slider-for .pro-big-pic { width: 80%; height: 460px; margin: 0 auto; border-radius: 30px; background-color: #fff; overflow: hidden;}
  .index-collaboration-pro .slider-for .pro-big-pic a { width: 100%; height: 100%; padding: 40px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-collaboration-pro .slider-for .pro-big-pic img { width: auto; height: 90%;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title { width: 100%; padding: 20px 0 0 0; text-align: center;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title span { padding: 5px 20px; color: #fff; font-size: 1.2rem; font-weight: 500; border-radius: 20px; background-color: #229560;}
  .index-collaboration-pro .slider-nav .pro-pic { height: 160px; margin: 0 10px; border-radius: 20px; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-collaboration-pro .slider-nav .pro-pic img { width: auto; height: 100%;}


  .page-collaboration-intro { clear: both; width: 90%; margin: 0 auto 60px auto; display: flex; justify-content: center; align-items: center;}
  .page-collaboration-intro .logo { width: 360px;}
  .page-collaboration-intro .logo img { width: 260px; height: auto;}
  .page-collaboration-intro .intro { width: calc(100% - 360px); color: #000; font-size: 1.2rem; font-weight: 300; line-height: 2em;}

  .page-collaboration-list-full { clear: both; width: 100%; padding: 60px 0 0 0; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-collaboration-list-full a { width: calc(100% / 6 - 40px); margin: 0 20px 40px 20px; display: block;}
  .page-collaboration-list-full a img { width: 100%; height: auto;}

  .page-collaboration-con { clear: both; width: 100%; margin: 40px 0 0 0;}
  .page-collaboration-con .text-intro { width: 100%; margin: 0 0 40px 0; color: #000; font-size: 1.1rem; line-height: 2em; text-align: center;}
  .page-collaboration-con .pro-list { width: 100%; padding: 40px; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-collaboration-con .pro-list .px300 { width: 300px; margin: 20px;}
  .page-collaboration-con .pro-list .px500 { width: 500px; margin: 20px;}
  .page-collaboration-con .pro-list .px300 img, 
  .page-collaboration-con .pro-list .px500 img { width: 100%; height: auto;}
  .page-collaboration-con .pro-list .px300 .text, 
  .page-collaboration-con .pro-list .px500 .text { width: 100%; padding: 5px 10px; color: #229560; font-size: 1.2rem; font-weight: 500; text-align: center; box-sizing: border-box;}


  /************ section #index-agent-brand ************/

  section#index-agent-brand { clear: both; width: 100%; padding: 100px calc(50% - 500px); box-sizing: border-box; background-color: #3b3737;}

  .index-brands-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-brands-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-brands-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-brands-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box { width: calc(100% / 4 - 40px); margin: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box img { width: 90%; height: auto; margin: 0 auto; transition: 0.5s;}
  .index-brands-list .brand-box img:hover { width: 98%; height: auto;}


  .page-brand-con { clear: both; width: 100%; padding: 60px 40px; margin: 0 0 60px 0; box-sizing: border-box; background-color: #fff;}
  .page-brand-con img.brand-title { width: auto; height: 120px; margin: 0 auto;}
  .page-brand-con .brand-url { clear: both; width: 100%; padding: 20px 0 60px 0; color: #229560; font-size: 1.1rem; text-align: center;}
  .page-brand-con .brand-url a { color: #229560; text-decoration: none;}
  .page-brand-con .brand-url a:hover { border-bottom: 1px #229560 solid;}
  .page-brand-con .brand-intro { clear: both; width: 90%; margin: 0 auto; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-brand-con .brand-intro img.photo-pro { clear: both; max-width: 100%; height: auto; margin: 40px auto 0 auto;}


  /************ section #index-channel ************/

  section#index-channel { clear: both; width: 100%; padding: 100px calc(50% - 500px); box-sizing: border-box; background-color: #4f4f4f;}

  .index-channel-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-channel-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-channel-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-channel-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-channel-list .channel-box { width: calc(100% / 6 - 30px); margin: 15px; border-radius: 20px; background-color: #fff; overflow: hidden;}
  .index-channel-list .channel-box a { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .index-channel-list .channel-box img { width: 100%; height: auto; margin: 0 auto; transition: 0.5s;}


  /************ section #index-videos ************/

  section#index-videos { clear: both; width: 100%; padding: 100px calc(50% - 500px); box-sizing: border-box; background-color: #3b3737;}

  .index-videos-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-videos-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-videos-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-video-list { clear: both; width: 85%; margin: 0 auto;}
  .index-video-list .video-for { margin: 0 0 30px 0;}
  .index-video-list .video-for .video-big { width: 100%; padding: 30px 0; margin: 0 auto; box-sizing: border-box; border-radius: 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden;}
  .index-video-list .video-nav .video-pic { height: 200px; margin: 0 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-video-list .video-nav .video-pic img { width: auto; height: 100%;}


  .index-videos-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .index-videos-full .video-box { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%;}
  .page-banner-box img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; padding: 100px calc(50% - 500px); box-sizing: border-box; background-color: #3b3737; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}

  .page-contact-title { clear: both; width: 100%; margin: 0 0 60px 0; text-align: center;}
  .page-contact-title span.bigger { color: #000; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .page-contact-title span.smaller { color: #229560; font-size: 1.4rem;}

  .page-contact-col-lf { width: 40%; padding: 0 40px 0 0; box-sizing: border-box;}
  .page-contact-col-lf span.company-name { padding: 0 0 5px 0; color: #229560; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #229560 solid;}
  .page-contact-col-lf span.company-infor { color: #000; font-size: 1.2rem; line-height: 2em; word-wrap: break-word; word-break: break-all;}
  .page-contact-col-lf img.contact-pic { width: 100%; height: auto; margin: 20px 0 0 0;}

  .page-contact-col-rt { width: 50%; padding: 0 0 0 40px; box-sizing: border-box;}
  .page-contact-col-rt input[type=text], 
  .page-contact-col-rt input[type=tel], 
  .page-contact-col-rt input[type=email] { width: 90%; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt textarea { width: 90%; height: 140px; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt input[type=button] { margin: 30px 0 0 0; padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #229560; cursor: pointer;}


  /************ site map ************/

  ul.page-sitemap-con { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-sitemap-con li { padding: 0; margin: 10px 20px;}
  ul.page-sitemap-con li a { color: #000; font-size: 1.4rem; text-decoration: none;}
  ul.page-sitemap-con li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error404-con { clear: both; width: 100%; padding: 40px 0; text-align: center;}
  .page-error404-con span.text-con { color: #000; font-size: 1.4rem; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 1.2rem; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #229560; border-bottom: 1px #229560 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 60px calc(50% - 500px); box-sizing: border-box; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .footer-logo { width: 400px;}
  .footer-logo img { width: 90%; height: auto;}

  ul.footer-nav { width: calc(100% - 800px); padding: 0; margin: 0; list-style: none; display: block;}
  ul.footer-nav li { width: 100%; padding: 0; margin: 15px 0; text-align: center;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none; transition: 0.3s;}
  ul.footer-nav li a:hover { color: #cacacb;}

  .footer-contact { width: 400px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-contact .caption { width: 60px; margin: 0 0 30px 0;}
  .footer-contact .caption img { width: 30px; height: auto;}
  .footer-contact .column { width: calc(100% - 60px); margin: 0 0 30px 0; color: #fff; font-size: 1.1rem; line-height: 1.4em; word-wrap: break-word; word-break: break-all;}


  .footer-login { clear: both; width: 100%; font-size: 0.8rem; text-align: right;}
  .footer-login a { color: rgba(255,255,255,0.2); text-decoration: none;}

}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /************ header + nav ************/

  header { width: 100%; height: 100px; padding: 0 40px; box-sizing: border-box; border-bottom: 6px #262626 solid; background-image: url("../images/header_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 300px;}
  .header-logo img { width: 90%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 300px);}
  nav#mo .nav-icon { width: 60px; color: #fff; font-size: 2.4rem; text-align: center; cursor: pointer; float: right;}
  nav#mo ul.nav-menu { width: 100%; padding: 60px 40px; margin: 0; box-sizing: border-box; background-color: #229560; list-style: none; display: none; position: absolute; top: 100px; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.2rem; text-decoration: none; text-align: center; transition: 0.3s; display: block;}
  nav#mo ul.nav-menu li a:active { color: #cacacb;}

  .header-lang-box { display: none;}
  .header-lang-box-mo { width: 100%; margin: 60px 0 0 0; color: #fff; font-size: 0.8rem; display: flex; justify-content: center; align-items: center;}
  .header-lang-box-mo a { padding: 3px 10px; color: #fff; text-align: center; text-decoration: none; box-sizing: border-box; border-radius: 14px; border: 1px transparent solid; display: block; transition: 0.5s;}
  .header-lang-box-mo a:hover { border: 1px #fff solid;}
  .header-lang-box-mo a.sel { color: #229560; font-weight: 500; background-color: #fff;}


  /************ index-banner ************/

  .index-banner-box { clear: both; width: 100%; height: 36vw; overflow: hidden;}
  .index-banner-box img { width: 100%; height: auto;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 100px 60px 100px 40px; box-sizing: border-box; background-color: #3b3737;}

  .index-news-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-news-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-news-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-news-list { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; flex-wrap: wrap;}
  .index-news-list .news-box { width: calc(100% / 2 - 40px); margin: 0 20px 40px 20px;}
  .index-news-list .news-box .pic { width: 100%; border-bottom: 5px #229560 solid;}
  .index-news-list .news-box .pic img { width: 100%; height: auto;}
  .index-news-list .news-box .date { width: 100%; padding: 10px 0; color: #ccc; font-size: 1rem;}
  .index-news-list .news-box .title { width: 100%; color: #fff; font-size: 1.2rem; font-weight: 500; text-decoration: none;}
  .index-news-list .news-box .read-more { width: 100%; margin: 40px 0 0 0;}
  .index-news-list .news-box .read-more a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-news-list .news-box .read-more a:hover { color: #fff;}


  ul#page-number-box { clear: both; width: 100%; padding: 0; margin: 50px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#page-number-box li { padding: 0; margin: 10px 5px;}
  ul#page-number-box li a { padding: 5px 10px; color: #fff; font-size: 1.1rem; border: 1px transparent solid; text-decoration: none; display: block;}
  ul#page-number-box li a:hover { border: 1px #229560 solid;}
  ul#page-number-box li a.sel { color: #fff; border: 1px #229560 solid; background-color: #229560;}


  .page-news-content { clear: both; width: 100%;}
  .page-news-content .news-title { width: 100%; color: #000; font-size: 1.2rem; font-weight: 500;}
  .page-news-content .news-date { width: 100%; padding: 20px 0; color: #000; font-size: 1rem; text-align: right;}
  .page-news-content .news-content { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto; margin: 20px 0;}
  
  .back-bt { clear: both; width: 100%; margin: 40px 0 0 0;}
  .back-bt a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .back-bt a:hover { color: #fff;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .index-about-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-about-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-about-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-about-content { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .index-about-content .about-text { width: 70%; color: #fff; font-size: 1.2rem; font-weight: 300; line-height: 2em;}
  .index-about-content .about-pic { width: 50%; padding: 0 0 0 40px; box-sizing: border-box;}
  .index-about-content .about-pic img { width: 100%; height: auto;}
  .index-about-content .about-more-bt { width: 100%; margin: 60px 0 0 0;}
  .index-about-content .about-more-bt .read-more { width: 120px; margin: 0 auto;}
  .index-about-content .about-more-bt .read-more a { width: 100%; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-about-content .about-more-bt .read-more a:hover { color: #fff;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #3b3737;}

  .index-service-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-service-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-service-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-service-items { clear: both; width: 100%; display: flex; justify-content: center; align-items: stretch;}
  .index-service-items .serv-item-box { width: 180px; height: 180px; margin: 0 20px; border-radius: 100%; background-color: #ddd; overflow: hidden;}
  .index-service-items .serv-item-box .icon { width: 100%; height: 90px; margin: 20px 0 0 0; color: #229560; font-size: 4rem; display: flex; justify-content: center; align-items: center;}
  .index-service-items .serv-item-box .title { width: 100%; padding: 0 20px; box-sizing: border-box; color: #229560; font-size: 1rem; font-weight: 300; text-align: center;}

  .index-ser-read-more { clear: both; width: 100%; margin: 80px 0 0 0;}
  .index-ser-read-more a { width: 120px; padding: 10px 0; margin: 0 auto; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-ser-read-more a:hover { color: #fff;}


  /************ section #index-collaboration ************/

  section#index-collaboration { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #4f4f4f;}

  .index-collaboration-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-collaboration-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-collaboration-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-collaboration-pro { clear: both; width: 100%;}
  .index-collaboration-pro .slider-for { margin: 0 0 30px 0;}
  .index-collaboration-pro .slider-for .pro-big-pic { width: 90%; height: 460px; margin: 0 auto; border-radius: 30px; background-color: #fff; overflow: hidden;}
  .index-collaboration-pro .slider-for .pro-big-pic a { width: 100%; height: 100%; padding: 40px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-collaboration-pro .slider-for .pro-big-pic img { width: auto; height: 90%;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title { width: 100%; padding: 20px 0 0 0; text-align: center;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title span { padding: 5px 20px; color: #fff; font-size: 1.2rem; font-weight: 500; border-radius: 20px; background-color: #229560;}
  .index-collaboration-pro .slider-nav .pro-pic { height: 160px; margin: 0 10px; border-radius: 20px; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-collaboration-pro .slider-nav .pro-pic img { width: auto; height: 100%;}


  .page-collaboration-intro { clear: both; width: 100%; margin: 0 auto 60px auto; display: flex; justify-content: center; align-items: center;}
  .page-collaboration-intro .logo { width: 300px;}
  .page-collaboration-intro .logo img { width: 260px; height: auto;}
  .page-collaboration-intro .intro { width: calc(100% - 300px); color: #000; font-size: 1.2rem; font-weight: 300; line-height: 2em;}

  .page-collaboration-list-full { clear: both; width: 100%; padding: 60px 0 0 0; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-collaboration-list-full a { width: calc(100% / 4 - 40px); margin: 0 20px 40px 20px; display: block;}
  .page-collaboration-list-full a img { width: 100%; height: auto;}

  .page-collaboration-con { clear: both; width: 100%; margin: 40px 0 0 0;}
  .page-collaboration-con .text-intro { width: 100%; margin: 0 0 40px 0; color: #000; font-size: 1.1rem; line-height: 2em; text-align: center;}
  .page-collaboration-con .pro-list { width: 100%; padding: 40px; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-collaboration-con .pro-list .px300 { width: 240px; margin: 20px;}
  .page-collaboration-con .pro-list .px500 { width: 400px; margin: 20px;}
  .page-collaboration-con .pro-list .px300 img, 
  .page-collaboration-con .pro-list .px500 img { width: 100%; height: auto;}
  .page-collaboration-con .pro-list .px300 .text, 
  .page-collaboration-con .pro-list .px500 .text { width: 100%; padding: 5px 10px; color: #229560; font-size: 1.2rem; font-weight: 500; text-align: center; box-sizing: border-box;}


  /************ section #index-agent-brand ************/

  section#index-agent-brand { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #3b3737;}

  .index-brands-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-brands-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-brands-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-brands-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box { width: calc(100% / 3 - 40px); margin: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box img { width: 90%; height: auto; margin: 0 auto; transition: 0.5s;}
  .index-brands-list .brand-box img:hover { width: 98%; height: auto;}


  .page-brand-con { clear: both; width: 100%; padding: 60px 40px; margin: 0 0 60px 0; box-sizing: border-box; background-color: #fff;}
  .page-brand-con img.brand-title { width: auto; height: 120px; margin: 0 auto;}
  .page-brand-con .brand-url { clear: both; width: 100%; padding: 20px 0 60px 0; color: #229560; font-size: 1.1rem; text-align: center;}
  .page-brand-con .brand-url a { color: #229560; text-decoration: none;}
  .page-brand-con .brand-url a:hover { border-bottom: 1px #229560 solid;}
  .page-brand-con .brand-intro { clear: both; width: 100%; margin: 0 auto; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-brand-con .brand-intro img.photo-pro { clear: both; max-width: 100%; height: auto; margin: 40px auto 0 auto;}


  /************ section #index-channel ************/

  section#index-channel { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #4f4f4f;}

  .index-channel-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-channel-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-channel-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-channel-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-channel-list .channel-box { width: calc(100% / 4 - 30px); margin: 15px; border-radius: 20px; background-color: #fff; overflow: hidden;}
  .index-channel-list .channel-box a { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .index-channel-list .channel-box img { width: 100%; height: auto; margin: 0 auto; transition: 0.5s;}


  /************ section #index-videos ************/

  section#index-videos { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #3b3737;}

  .index-videos-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-videos-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-videos-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-video-list { clear: both; width: 85%; margin: 0 auto;}
  .index-video-list .video-for { margin: 0 0 30px 0;}
  .index-video-list .video-for .video-big { width: 100%; padding: 30px 0; margin: 0 auto; box-sizing: border-box; border-radius: 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden;}
  .index-video-list .video-nav .video-pic { height: 200px; margin: 0 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-video-list .video-nav .video-pic img { width: auto; height: 100%;}


  .index-videos-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .index-videos-full .video-box { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden;}
  .page-banner-box img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #3b3737;}

  .page-contact-title { clear: both; width: 100%; margin: 0 0 60px 0; text-align: center;}
  .page-contact-title span.bigger { color: #000; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .page-contact-title span.smaller { color: #229560; font-size: 1.4rem;}

  .page-contact-col-lf { width: 70%; margin: 0 auto 40px auto;}
  .page-contact-col-lf span.company-name { padding: 0 0 5px 0; color: #229560; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #229560 solid;}
  .page-contact-col-lf span.company-infor { color: #000; font-size: 1.2rem; line-height: 2em; word-wrap: break-word; word-break: break-all;}
  .page-contact-col-lf img.contact-pic { width: 100%; height: auto; margin: 20px 0 0 0;}

  .page-contact-col-rt { width: 70%; margin: 0 auto;}
  .page-contact-col-rt input[type=text], 
  .page-contact-col-rt input[type=tel], 
  .page-contact-col-rt input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt textarea { width: 100%; height: 140px; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt input[type=button] { margin: 30px 0 0 0; padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #229560; cursor: pointer;}


  /************ site map ************/

  ul.page-sitemap-con { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-sitemap-con li { padding: 0; margin: 10px 20px;}
  ul.page-sitemap-con li a { color: #000; font-size: 1.4rem; text-decoration: none;}
  ul.page-sitemap-con li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error404-con { clear: both; width: 100%; padding: 40px 0; text-align: center;}
  .page-error404-con span.text-con { color: #000; font-size: 1.4rem; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 1.2rem; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #229560; border-bottom: 1px #229560 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}

  .footer-logo { width: 200px; padding: 0 20px 0 0; box-sizing: border-box;}
  .footer-logo img { width: 100%; height: auto;}

  ul.footer-nav { width: calc(100% - 550px); padding: 0; margin: 0; list-style: none; display: block;}
  ul.footer-nav li { width: 100%; padding: 0; margin: 15px 0; text-align: center;}
  ul.footer-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none; transition: 0.3s;}
  ul.footer-nav li a:hover { color: #cacacb;}

  .footer-contact { width: 350px; padding: 0 0 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-contact .caption { width: 60px; margin: 0 0 30px 0;}
  .footer-contact .caption img { width: 30px; height: auto;}
  .footer-contact .column { width: calc(100% - 60px); margin: 0 0 30px 0; color: #fff; font-size: 1.1rem; line-height: 1.4em; word-wrap: break-word; word-break: break-all;}


  .footer-login { clear: both; width: 100%; font-size: 0.8rem; text-align: right;}
  .footer-login a { color: rgba(255,255,255,0.2); text-decoration: none;}


}

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

  /************ header + nav ************/

  header { width: 100%; height: 100px; padding: 0 20px; box-sizing: border-box; border-bottom: 6px #262626 solid; background-image: url("../images/header_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 300px;}
  .header-logo img { width: 90%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 300px);}
  nav#mo .nav-icon { width: 60px; color: #fff; font-size: 2.4rem; text-align: center; cursor: pointer; float: right;}
  nav#mo ul.nav-menu { width: 100%; padding: 60px 40px; margin: 0; box-sizing: border-box; background-color: #229560; list-style: none; display: none; position: absolute; top: 100px; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.2rem; text-decoration: none; text-align: center; transition: 0.3s; display: block;}
  nav#mo ul.nav-menu li a:active { color: #cacacb;}

  .header-lang-box { display: none;}
  .header-lang-box-mo { width: 100%; margin: 60px 0 0 0; color: #fff; font-size: 0.8rem; display: flex; justify-content: center; align-items: center;}
  .header-lang-box-mo a { padding: 3px 10px; color: #fff; text-align: center; text-decoration: none; box-sizing: border-box; border-radius: 14px; border: 1px transparent solid; display: block; transition: 0.5s;}
  .header-lang-box-mo a:hover { border: 1px #fff solid;}
  .header-lang-box-mo a.sel { color: #229560; font-weight: 500; background-color: #fff;}


  /************ index-banner ************/

  .index-banner-box { clear: both; width: 100%; height: 36vw; overflow: hidden;}
  .index-banner-box img { width: 100%; height: auto;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #3b3737;}

  .index-news-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-news-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-news-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-news-list { width: 100%;}
  .index-news-list .news-box { width: 100%; margin: 0 0 60px 0;}
  .index-news-list .news-box .pic { width: 100%; border-bottom: 5px #229560 solid;}
  .index-news-list .news-box .pic img { width: 100%; height: auto;}
  .index-news-list .news-box .date { width: 100%; padding: 10px 0; color: #ccc; font-size: 1rem;}
  .index-news-list .news-box .title { width: 100%; color: #fff; font-size: 1.2rem; font-weight: 500; text-decoration: none;}
  .index-news-list .news-box .read-more { width: 100%; margin: 40px 0 0 0;}
  .index-news-list .news-box .read-more a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-news-list .news-box .read-more a:hover { color: #fff;}


  ul#page-number-box { clear: both; width: 100%; padding: 0; margin: 50px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#page-number-box li { padding: 0; margin: 10px 5px;}
  ul#page-number-box li a { padding: 5px 10px; color: #fff; font-size: 1.1rem; border: 1px transparent solid; text-decoration: none; display: block;}
  ul#page-number-box li a:hover { border: 1px #229560 solid;}
  ul#page-number-box li a.sel { color: #fff; border: 1px #229560 solid; background-color: #229560;}


  .page-news-content { clear: both; width: 100%;}
  .page-news-content .news-title { width: 100%; color: #000; font-size: 1.2rem; font-weight: 500;}
  .page-news-content .news-date { width: 100%; padding: 20px 0; color: #000; font-size: 1rem; text-align: right;}
  .page-news-content .news-content { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto; margin: 20px 0;}
  
  .back-bt { clear: both; width: 100%; margin: 40px 0 0 0;}
  .back-bt a { width: 120px; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .back-bt a:hover { color: #fff;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .index-about-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-about-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-about-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-about-content { clear: both; width: 100%;}
  .index-about-content .about-text { width: 100%; color: #fff; font-size: 1.2rem; font-weight: 300; line-height: 2em;}
  .index-about-content .about-pic { width: 100%; margin: 60px 0 0 0;}
  .index-about-content .about-pic img { width: 100%; height: auto;}
  .index-about-content .about-more-bt { width: 100%; margin: 60px 0 0 0;}
  .index-about-content .about-more-bt .read-more { width: 120px; margin: 0 auto;}
  .index-about-content .about-more-bt .read-more a { width: 100%; padding: 10px 0; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-about-content .about-more-bt .read-more a:hover { color: #fff;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #3b3737;}

  .index-service-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-service-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-service-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-service-items { clear: both; width: 100%;}
  .index-service-items .serv-item-box { width: 280px; height: 280px; margin: 40px auto; border-radius: 100%; background-color: #ddd; overflow: hidden;}
  .index-service-items .serv-item-box .icon { width: 100%; height: 180px; margin: 20px 0 0 0; color: #229560; font-size: 6rem; display: flex; justify-content: center; align-items: center;}
  .index-service-items .serv-item-box .title { width: 100%; padding: 0 20px; box-sizing: border-box; color: #229560; font-size: 1.2rem; font-weight: 300; text-align: center;}

  .index-ser-read-more { clear: both; width: 100%; margin: 80px 0 0 0;}
  .index-ser-read-more a { width: 120px; padding: 10px 0; margin: 0 auto; color: #000; font-size: 0.9rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 6px; background-color: #229560; display: block; transition: 0.5s;}
  .index-ser-read-more a:hover { color: #fff;}


  /************ section #index-collaboration ************/

  section#index-collaboration { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #4f4f4f;}

  .index-collaboration-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-collaboration-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-collaboration-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-collaboration-pro { clear: both; width: 100%;}
  .index-collaboration-pro .slider-for { margin: 0 0 30px 0;}
  .index-collaboration-pro .slider-for .pro-big-pic { width: 100%; height: 300px; margin: 0 auto; border-radius: 30px; background-color: #fff; overflow: hidden;}
  .index-collaboration-pro .slider-for .pro-big-pic a { width: 100%; height: 100%; padding: 40px; box-sizing: border-box; text-decoration: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-collaboration-pro .slider-for .pro-big-pic img { width: auto; height: 80%;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title { width: 100%; padding: 20px 0 0 0; text-align: center;}
  .index-collaboration-pro .slider-for .pro-big-pic .pro-title span { padding: 5px 20px; color: #fff; font-size: 1rem; font-weight: 500; border-radius: 20px; background-color: #229560;}
  .index-collaboration-pro .slider-nav .pro-pic { height: 160px; margin: 0 10px; border-radius: 20px; background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-collaboration-pro .slider-nav .pro-pic img { width: auto; height: 100%;}


  .page-collaboration-intro { clear: both; width: 100%; margin: 0 0 60px 0;}
  .page-collaboration-intro .logo { width: 100%; margin: 0 0 40px 0;}
  .page-collaboration-intro .logo img { width: 260px; height: auto; margin: 0 auto;}
  .page-collaboration-intro .intro { width: 100%; color: #000; font-size: 1.2rem; font-weight: 300; line-height: 2em;}

  .page-collaboration-list-full { clear: both; width: 100%; padding: 60px 0 0 0; border-top: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-collaboration-list-full a { width: calc(100% / 2 - 40px); margin: 0 20px 40px 20px; display: block;}
  .page-collaboration-list-full a img { width: 100%; height: auto;}

  .page-collaboration-con { clear: both; width: 100%; margin: 40px 0 0 0;}
  .page-collaboration-con .text-intro { width: 100%; margin: 0 0 40px 0; color: #000; font-size: 1.1rem; line-height: 2em; text-align: center;}
  .page-collaboration-con .pro-list { width: 100%; padding: 20px; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-collaboration-con .pro-list .px300 { width: 100%; margin: 0 0 20px 0;}
  .page-collaboration-con .pro-list .px500 { width: 100%; margin: 0 0 20px 0;}
  .page-collaboration-con .pro-list .px300 img, 
  .page-collaboration-con .pro-list .px500 img { width: 100%; height: auto;}
  .page-collaboration-con .pro-list .px300 .text, 
  .page-collaboration-con .pro-list .px500 .text { width: 100%; padding: 5px 10px; color: #229560; font-size: 1.2rem; font-weight: 500; text-align: center; box-sizing: border-box;}


  /************ section #index-agent-brand ************/

  section#index-agent-brand { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #3b3737;}

  .index-brands-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-brands-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-brands-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-brands-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box { width: calc(100% / 2 - 40px); margin: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .index-brands-list .brand-box img { width: 90%; height: auto; margin: 0 auto; transition: 0.5s;}
  .index-brands-list .brand-box img:hover { width: 98%; height: auto;}


  .page-brand-con { clear: both; width: 100%; padding: 60px 20px; margin: 0 0 60px 0; box-sizing: border-box; background-color: #fff;}
  .page-brand-con img.brand-title { max-width: 100%; width: auto; max-height: 90px; margin: 0 auto;}
  .page-brand-con .brand-url { clear: both; width: 100%; padding: 20px 0 60px 0; color: #229560; font-size: 1.1rem; text-align: center;}
  .page-brand-con .brand-url a { color: #229560; text-decoration: none;}
  .page-brand-con .brand-url a:hover { border-bottom: 1px #229560 solid;}
  .page-brand-con .brand-intro { clear: both; width: 100%; margin: 0 auto; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-brand-con .brand-intro img.photo-pro { clear: both; max-width: 100%; height: auto; margin: 40px auto 0 auto;}


  /************ section #index-channel ************/

  section#index-channel { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #4f4f4f;}

  .index-channel-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-channel-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-channel-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-channel-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-channel-list .channel-box { width: calc(100% / 3 - 30px); margin: 15px; border-radius: 20px; background-color: #fff; overflow: hidden;}
  .index-channel-list .channel-box a { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .index-channel-list .channel-box img { width: 100%; height: auto; margin: 0 auto; transition: 0.5s;}


  /************ section #index-videos ************/

  section#index-videos { clear: both; width: 100%; padding: 100px 20px; box-sizing: border-box; background-color: #3b3737;}

  .index-videos-title { width: 100%; margin: 0 0 60px 0; text-align: center;}
  .index-videos-title span.bigger { color: #fff; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .index-videos-title span.smaller { color: #229560; font-size: 1.4rem;}

  .index-video-list { clear: both; width: 100%; margin: 0 auto;}
  .index-video-list .video-for { margin: 0 0 30px 0;}
  .index-video-list .video-for .video-big { width: 100%; padding: 30px 0; margin: 0 auto; box-sizing: border-box; border-radius: 30px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; overflow: hidden;}
  .index-video-list .video-nav .video-pic { height: 160px; margin: 0 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer;}
  .index-video-list .video-nav .video-pic img { width: auto; height: 100%;}


  .index-videos-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .index-videos-full .video-box { width: 100%; margin: 0 0 30px 0;}


  /************ page-banner ************/

  .page-banner-box { clear: both; width: 100%; overflow: hidden;}
  .page-banner-box img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; padding: 100px 20px; box-sizing: border-box; background-color: #3b3737;}

  .page-contact-title { clear: both; width: 100%; margin: 0 0 60px 0; text-align: center;}
  .page-contact-title span.bigger { color: #000; font-size: 2.4rem; font-weight: 300; letter-spacing: 0.1em;}
  .page-contact-title span.smaller { color: #229560; font-size: 1.4rem;}

  .page-contact-col-lf { width: 100%; margin: 0 auto 40px auto;}
  .page-contact-col-lf span.company-name { padding: 0 0 5px 0; color: #229560; font-size: 1.6rem; font-weight: 500; border-bottom: 1px #229560 solid;}
  .page-contact-col-lf span.company-infor { color: #000; font-size: 1.2rem; line-height: 2em; word-wrap: break-word; word-break: break-all;}
  .page-contact-col-lf img.contact-pic { width: 100%; height: auto; margin: 20px 0 0 0;}

  .page-contact-col-rt { width: 100%; margin: 0 auto;}
  .page-contact-col-rt input[type=text], 
  .page-contact-col-rt input[type=tel], 
  .page-contact-col-rt input[type=email] { width: 100%; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt textarea { width: 100%; height: 140px; padding: 10px; margin: 0 0 10px 0; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #fff; box-sizing: border-box;}
  .page-contact-col-rt input[type=button] { margin: 30px 0 0 0; padding: 10px 30px; color: #fff; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 12px; background-color: #229560; cursor: pointer;}


  /************ site map ************/

  ul.page-sitemap-con { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.page-sitemap-con li { width: 100%; padding: 0; margin: 20px 0; text-align: center;}
  ul.page-sitemap-con li a { color: #000; font-size: 1.4rem; text-decoration: none;}
  ul.page-sitemap-con li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error404-con { clear: both; width: 100%; padding: 40px 0; text-align: center;}
  .page-error404-con span.text-con { color: #000; font-size: 1.4rem; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 1.2rem; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #229560; border-bottom: 1px #229560 solid;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; background-image: url("../images/footer_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .footer-logo { width: 100%;}
  .footer-logo img { width: 200px; height: auto; margin: 0 auto;}

  ul.footer-nav { width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.footer-nav li { padding: 0; margin: 0;}
  ul.footer-nav li a { padding: 10px 20px; color: #fff; font-size: 1.1rem; text-decoration: none; transition: 0.3s; display: block;}
  ul.footer-nav li a:hover { color: #cacacb;}

  .footer-contact { width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .footer-contact .caption { width: 60px; margin: 0 0 20px 0;}
  .footer-contact .caption img { width: 30px; height: auto;}
  .footer-contact .column { width: calc(100% - 60px); margin: 0 0 20px 0; color: #fff; font-size: 1.1rem; line-height: 1.4em; word-wrap: break-word; word-break: break-all;}


  .footer-login { clear: both; width: 100%; margin: 10px 0 0 0; font-size: 0.8rem; text-align: right;}
  .footer-login a { color: rgba(255,255,255,0.2); text-decoration: none;}
  

}