/* scss file*/

.mobile-display {
   display: none;
}

@media screen and (max-width: 1110px) {
   .banner .item {
      margin: 0 35px;
   }

   .banner .arrow-box .btn-left {
      left: 0;
      padding: 15px 10px;
   }

   .banner .arrow-box .btn-right {
      right: 0;
      padding: 15px 10px;
   }

   .sub-nav li {
      width: calc(16.6% - 4px);
      margin-bottom: 5px;
   }
}

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

   /* form-type */
   .form-type .two-col-m { display: block;}
   .form-type .two-col-m>div { width: 100%; padding: 5px 0;}
   .form-type .two-col-m>div:last-child { margin-left: 0px; }
   .form-type .two-col-m > input { width: 100%; max-width: 100%;}

   header .top-box { margin: 0 10px; }
   .main-box .right-box { padding: 0 10px 0 20px; }

   .banner .clock .fl-right { margin-right: 50px; }

   .index-service .service-box .item.box-bg02 a {
      width: 48%;
   }

   .index-service .service-box .item .body-box .banner-link a::before {
      margin: 0 15px 0 30px;
   }

   .index-service .service-box .item .body-box .banner-link:after {
      left: -60px;
   }

   .authorization .authorization-list li {
      width: 31.33%;
   }

   .award .award-list .item {
      width: calc(33.3% - 10px);
   }

   .product {
      margin: 0 10px;
   }

   .series-detail .cont-box01,
   .series-detail .cont-box02 {
      padding: 5px 10px 30px 10px;
   }

   .funtion-box {
      height: 220px;
   }

   /* dealer */
   .dealer {
      margin: 0 10px;
   }

   .table-style02 {
      border-top: 1px #d3d3d3 solid;
   }

}

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

   

   header nav .lis>div .sub-box .item a {
      width: 32.3%;
   }

   .index-service .service-box {
      display: block;
      margin: 0 10px;
   }

   .index-service .service-box .item {
      background-size: contain;
   }

   .index-service .service-box .item.box-bg01 {
      width: 49%;
      margin: 0 1% 10px 0;
      float: left;
   }

   .index-service .service-box .item.box-bg02 {
      width: 49%;
      margin: 0 0 10px 1%;
      float: left;
   }

   .index-service .service-box .item.box-bg03 {
      width: 100%;
      float: left;
      margin: 0;
   }

   .index-news-link {
      display: block;
   }

   .index-news-link .index-news {
      margin-right: 0;
   }

   .index-news-link .index-about {
      max-width: 100%;
   }

   .index-about-banner img {
      width: 100%;
   }

   .index-news-link .index-about .left-box {
      width: 49%;
      margin-right: 1%;
   }

   .index-news-link .index-about .right-box {
      width: 49%;
      margin-left: 1%;
   }

   .product .series-list .item {
      width: 48%;
   }

   .funtion-box {
      height: 205px;
   }

   .award .award-list .item {
      width: calc(50% - 10px);
   }

   .award .award-list .item span {
      font-size: 12px;
   }

   .main-box .right-box {
      padding-left: 10;
   }

   .news-lis ul li span {
      width: 140px;
   }

   .news-lis ul li a {
      margin-left: 150px;
   }

   .page-tab a {
      margin: 0 1px 5px 1px;
   }

   /* company */
   .company,
   .chairman {
      padding-left: 0px;
   }

   /*.col-two */
   .col-two .col-1-4,
   .col-two .col-4 {
      width: 48%;
   }

   /* cert */
   .certification .Cert-select .Cert-box {
      display: block;
   }

   .certification .Cert-select .Cert-box .Cert03 span br {
      display: none;
   }

   .vendor-list li .name {
      width: 150px;
   }

   .vendor-list li .info span {
      margin-bottom: 5px;
   }

   /* authorization */
   .authorization .authorization-list li {
      width: 48%;
   }

   /* video*/
   .video ul li {
      width: 23%;
   }

   /* pop */
   .pop .box .pop-box {
      width: 620px;
      left: calc(50% - 310px);
   }

   .pop02 .box .pop-box {
      width: 620px;
      left: calc(50% - 310px);
   }

   /*globle*/
   .globle {
      padding: 10px 0;
   }

   .globle .sub-tab a {
      padding: 10px 10px;
      font-size: 18px;
   }

   .globle .globle-list .item {
      display: block;
   }

   .globle .globle-list .item .kind {
      width: 100%;
      border-right: 0;
      border-bottom: 1px #c6c9cc solid;
   }

   .globle .globle-list .item .info>div {
      padding: 0;
   }

   .globle .globle-list .item .info2 {
      padding: 10px 0 0 0;
   }

   .globle .globle-dot:after {
      display: none;
   }
}


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


   /* video*/
   .video ul li {
      width: 31.33%;
   }

   /* quarterly  */
   .quarterly ul li {
      width: 48%;
   }

   
}

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

   body {
      padding-top: 60px;
   }

   header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 900;
      background-color: #ffffff;
   }

   header .top-box {
      padding: 13px 8px 8px 8px;
      margin: 0;
   }

   header .top-box .logo01 {
      width: 130px;
   }

   header .top-box .logo02 {
      margin-right: 60px;
      width: 91px;
   }


   /* mobile menu */
   header nav {
      position: fixed;
      top: 55px;
      right: -100%;
      bottom: 0;
      width: 100%;
      padding: 0;
      transition: all 0.3s ease;
   }

   header nav.active {
      right: 0;
      transition: all 0.3s ease;
   }

   header nav .lis {
      background-color: #d2d7da;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 900;
      margin: 0;
      overflow-y: auto;
      position: relative;
   }

   header nav .lis>div {
      width: 100%;
      background-color: #e9ecf1;
      flex: auto;
   }

   header nav .lis>div>a:hover {
      background-color: #e9ecf1;
   }

   header nav .lis>div .sub-box {
      z-index: 910;
      position: relative;
      top: auto;
      left: auto;
      display: block;
      opacity: 1;
      padding: 0;
      visibility: visible;
      box-shadow: 0 0 0;
      overflow: hidden;
      background-color: #e9ecf1;

   }

   header nav .lis>div .sub-box.subbg01,
   header nav .lis>div .sub-box.subbg02,
   header nav .lis>div .sub-box.subbg03,
   header nav .lis>div .sub-box.subbg04 {
      background-image: none;
   }

   header nav .lis>div .sub-box .item {
      width: 100%;
      max-width: 100%;
      border: 0;
      padding: 0 10px;
      height: 0;
      transition: all 0.3s ease;
      margin: 0;
   }

   header nav .lis>div .sub-box .item.open {
      height: auto;
      transition: all 0.3s ease;
   }

   header nav .lis>div .sub-box .item a {
      color: #666666;
      padding: 8px 20px;
      border-bottom: 1px #dce0e4 solid;
      border-left: 0;
      float: none;
      width: 100%;
      margin: 0;
      line-height: 39px;
   }

   header nav .lis>div:hover .sub-box {
      top: auto;
   }

   header nav .lis>div>a {
      color: #000000;
      border: 0;
      border-bottom: 1px #e7e7e7 solid;
      position: relative;
      text-align: left;
      padding-left: 20px;
   }

   header nav .lis>div>a:after {
      content: '';
      position: absolute;
      top: 22px;
      right: 10px;
      width: 0px;
      height: 10px;
      border: 7px transparent solid;
      border-top: 8px #3eaee5 solid;
      cursor: pointer;
      display: block;
   }

   header nav .lis .search-bar {
      background-color: #d2d7da;
      padding: 0 10px 20px 5px;
   }

   .main-box .left-menu {
      display: none;
   }


   .menu-icon {
      position: fixed;
      right: 12px;
      font-size: 12px;
      top: 17px;
      cursor: pointer;
      z-index: 950;
      width: 30px;
      height: 25px;
      transition: all 0.3 ease;
   }

   .menu-icon span {
      height: 3px;
      width: 27px;
      background-color: #666666;
      display: block;
      transition: all 0.3s ease;
   }

   .menu-icon:before {
      content: '';
      height: 3px;
      width: 27px;
      background-color: #666666;
      display: block;
      margin-bottom: 5px;
      transition: all 0.3s ease;
   }

   .menu-icon:after {
      content: '';
      height: 3px;
      width: 27px;
      background-color: #666666;
      display: block;
      margin-top: 5px;
      transition: all 0.3s ease;
   }

   .menu-icon:hover {
      transition: all 0.3s ease;
   }

   .menu-icon:hover span {
      background-color: #666666;
   }

   .menu-icon:hover:before {
      background-color: #666666;
   }

   .menu-icon:hover:after {
      background-color: #666666;
   }

   .menu-icon.active span {
      opacity: 0;
      transition: all 0.3s ease;
   }

   .menu-icon.active:before {
      width: 30px;
      margin: 10px 0 0 0;
      transform: rotate(45deg);
      transition: all 0.3s ease;
   }

   .menu-icon.active:after {
      width: 30px;
      margin: -6px 0 0 0;
      transform: rotate(-45deg);
      transition: all 0.3s ease;
   }

   /* mobile menu end */
   .main-box {
      display: block;
      margin: 0 10px;
   }

   .main-box .left-menu {
      width: 100%;
      min-height: auto;
      padding: 10px 10px 30px 10px;
      margin-bottom: 20px;
   }

   .banner .clock .time {
      font-size: 26px;
   }

   .banner .clock .time span {
      font-size: 20px;
   }

   .banner .clock .time:before {
      width: 30px;
      height: 30px;
      margin-right: 5px;
   }

   .banner .clock .slogan {
      font-size: 14px;
      padding-left: 38px;
   }

   .banner .arrow-box>div {
      padding: 0 10px;
      line-height: 115px;
      background-color: rgba(85, 85, 85, 0.7);
   }

   .banner .arrow-box>div:before {
      width: 8px;
      height: 13px;
   }

   .banner .item .banner-box {
      width: 96%;
   }

   .banner .item .banner-box .video:after {
      width: 40px;
      height: 40px;
      top: calc(50% - 20px);
      left: calc(50% - 20px);
   }




   header nav .search-bar button {
      width: 50px;
      border-left: 1px #d8d8d8 solid;
   }

   header nav .search-bar button span {
      width: 24px;
   }


   


   /*path */
   .path {
      font-size: 12px;
      padding: 10px;
   }

   .path .path-body a {
      font-size: 12px;
      padding: 2px;
   }

   .sub-banner h3 {
      font-size: 18px;
      padding: 5px 20px 5px 10px;
      left: 0;
      line-height: 1.6em;
      width: auto;
      top: calc(50% - 20px);
   }

   .index-service .service-title {
      font-size: 20px;
      padding: 20px 0;
   }

   .index-service .service-box .item h3 {
      font-size: 26px;
      font-weight: bold;
   }

   .index-service .service-box .item.box-bg01 {
      float: none;
      width: 100%;
      margin: 0 0 10px 0;
   }

   .index-service .service-box .item.box-bg02 {
      float: none;
      width: 100%;
      margin: 0 0 10px 0;
   }

   .index-service .service-box .item .body-box {
      padding: 10px;
   }

   .index-service .service-box .item .body-box .banner-link {
      margin: 0 0 5px 0;
   }

   .index-service .service-banner .banner-box a {
      width: calc(100% - 20px);
      float: none;
      margin: 0 10px 20px 10px;
   }

   .index-news-link h3.title {
      font-size: 20px;
   }

   .index-news-link .index-news .more-info {
      text-align: center;
   }

   .index-news-link .index-about .left-box,
   .index-news-link .index-about .right-box {
      width: 100%;
      float: none;
      margin: 0;
   }

   .news-lis ul li span {
      width: 100%;
      float: none;
      text-align: left;
   }

   .news-lis ul li a {
      margin-left: 0;
   }

   .news-lis ul li.title-th {
      display: none;
   }

   /* .series-detail .pic-box */
   .series-detail .pic-box {
      display: block;
   }

   .sub-nav {
      display: block;
      margin: 0 -1%;
   }

   .sub-nav li {
      width: calc(33.3% - 4px);
      margin-bottom: 5px;
   }

   footer {
      padding: 30px 0 0 0;
   }

   footer .copyright .f-cont {
      font-size: 14px;
   }

   footer .copyright .f-cont .buttom-link a {
      padding: 0 5px;
   }

   footer .foot-menu {
      padding: 0 10px 20px 10px;
   }

   footer .foot-menu .lis {
      width: 50%;
      margin: 0 0 20px 0;
   }

   footer .foot-menu .lis.icon-3lsi {
      width: 100%;
   }

   footer .foot-menu .lis h3 {
      width: 100%;
   }

   footer .foot-menu .lis ul {
      max-width: 100%;
   }

   footer .foot-menu .lis.icon-3lsi h3 {
      max-width: 50%;
      float: left;
   }


   /* pop */
   .pop .box .pop-box {
      width: 80%;
      left: 10%;
      top: 10%;
      padding-bottom: 20px;
   }

   .pop02 .box .pop-box {
      width: 80%;
      left: 10%;
      top: 10%;
      padding-bottom: 20px;
   }


   /* product */
   .product-banner .series-tool {
      text-align: center;
      position: relative;
      width: 100%;
      right: auto;
      bottom: auto;
      padding: 5px 0;
   }

   .product-banner .series-tool a {
      font-size: 12px;
   }

   .product .series-list {
      margin: 0px;
   }

   .product .series-list .item {
      display: block;
      width: 48%;
      margin: 0 1% 20px 1%;
   }

   .product .series-list .item .title {
      width: 100%;
   }

   .product .pro-lis .box .info .unit h4 span {
      padding: 0;
   }

   .product .series-list .item .title h3 span {
      font-size: 17px;
   }

   .product .product-list .item {
      width: calc(50% - 6px);
   }

   .funtion-box {
      height: 250px;
   }




   /* seven-core */
   .seven-tab {
      display: block;
      margin: 0;
      padding: 0 0 10px 0;
   }

   .seven-tab li {
      float: left;
      width: 48%;
      margin: 1%;
   }

   .seven-core {
      padding: 10px 0;
   }

   .seven-core .seven-title {
      font-size: 18px;
   }

   .seven-core .seven-title:before {
      top: 20px;
   }

   .seven-core .seven-cont {
      font-size: 16px;
   }

   .seven-core .seven-cont .cont-title {
      font-size: 20px;
      padding: 0 0 0 10px;
   }

   .seven-core .seven-cont .cont-two .left,
   .seven-core .seven-cont .cont-two .right {
      width: 100%;
      margin: 0;
      float: none;
   }

   .seven-core .seven-cont .cont-list li {
      font-size: 16px;
   }

   .seven-core .seven-cont .time-line li {
      font-size: 16px;
   }

   /* cert-info */
   .cert-info {
      padding: 10px 0;
   }

   .cert-info .item {
      display: block;
   }

   .cert-info .item .title,
   .cert-info .item .title-info {
      display: none;
   }

   .cert-info .item .kind {
      width: auto;
      flex: 1;
      padding: 10px;
      border: 0;
   }

   .cert-info .item .info {
      padding: 10px;
   }

   .cert-info .item .first {
      padding: 10px;
      border: 0;
   }

   .cert-info .item .last {
      padding: 10px;
      border: 0;
   }

   /*baby*/
   .baby {
      padding: 10px 0;
   }



   /* affiliate */
   .affiliate {
      padding: 10px 0;
   }

   .affiliate .kind {
      text-align: left;
      margin: 20px 0 10px 0;
   }

   .affiliate .affiliate-box {
      display: block;
   }

   .affiliate .affiliate-box .item {
      font-size: 14px;
      text-align: left;
      margin: 0 3px;
      padding: 0 0 5px 0;
   }

   .affiliate .affiliate-box .item .company-name {
      color: #7a7a7a;
   }

   /* funtion */
   .trial-calculation .room-info {
      font-size: 14px;
   }

   .trial-calculation .room-info input {
      clear: both;
      display: block;
      margin: 0 auto;
   }

   .trial-calculation .calculation {
      display: block;
   }

   .trial-calculation .calculation .space-info-box {
      width: 100%;
   }

   .trial-calculation .calculation .space-info-box .room {
      padding: 20px;
      float: left;
   }

   .trial-calculation .calculation .funtion-list .funtion-sub {
      display: block;
   }

   .trial-calculation .calculation .funtion-list .funtion-sub a {
      display: block;
      width: 48%;
      float: left;
   }

   .calculation-funtion-box {
      padding: 10px 5px;
   }

   .calculation-funtion-box li {
      width: 100%;
      float: none;
      font-size: 12px;
   }




   .product .product-list .item .title {
      display: block;
   }

   .product .product-list .item .title h3 {
      width: 100%;
      border-radius: 5px 5px 0 0;
   }

   .product .pro-lis .box {
      display: block;
   }

   .product .pro-lis .box .photo-name {
      width: 100%;
   }

   .product .pro-lis .box .info .unit {
      display: block;
   }

   .product .pro-lis .box .info .unit h4 {
      margin: 0 auto;
   }

   .product .pro-lis .box .info .unit .data {
      font-size: 12px;
      padding: 10px 0;
   }

   /* search-box */
   .search-box02 .left-area {
      width: 100%;
      margin-right: 0;
      display: block;
      float: none;
   }

   .search-box02 .left-area span {
      width: 100%;
      text-align: center;
      padding-bottom: 5px;
      display: block;
   }

   .search-box02 .left-area select {
      width: 100%;
      margin-bottom: 10px;
   }

   .search-box02 button {
      float: none;
      width: 100%;
   }

   /* responsibility */
   .responsibility {
      padding: 10px 0;
   }

   /* RoHs */
   .rohs {
      padding: 10px 0;
   }

   /* authorization */
   .authorization {
      padding: 10px 0;
   }

   /* certification */
   .certification {
      padding: 0;
   }

   /* .quarterly*/
   .quarterly {
      padding: 0 0 0 10px;
   }

   .quarterly .info {
      font-size: 16px;
   }

   .quarterly ul li .quarterly-img {
      padding: 16px;
   }

   .quarterly ul li .quarterly-img a {
      top: 18px;
      left: 18px;
      right: 18px;
      bottom: 18px;
      filter: brightness(1);
   }

   .quarterly ul li .nunmber {
      font-size: 14px;
      right: 3px;
      bottom: 2px;
   }

   .quarterly ul li .time {
      font-size: 20px;
   }

   .page-info {
      padding: 10px 0;
   }

   .form {
      padding: 10px 0;
   }

   .form-box {
      padding: 30px 10px 20px 10px;
   }

   .form-box .btn {
      padding: 10px 0;
      text-align: center;
   }



   .trial-calculation .calculation .space-info-box .out-box {
      height: 250px;
   }
   
   /**/
   .col-two .left,
   .col-two .right { width: 100%; margin: 1% 0;}

   .col-two .col-3 {
      width: 100%;
      margin: 1% 0;
   }

   .col-two .col-6 {
      width: 100%;
      margin: 1% 0;
   }

   .col-two .col-1-4 {
      width: 48%;
   }


   /* table-style02 */
   .table-style02 .th-lis {
      display: none;
   }

   .table-style02 .tr-lis {
      display: block;
   }

   .table-style02 div.btn-td {
      width: 50%;
      float: left;
   }

   .table-style02 div.category {
      width: 100%;
   }

   .table-style02 div.category:before {
      content: '類別 :';
      padding-right: 10px;
      color: #9c9c9c;
   }

   .table-style02 div.numbering {
      width: 100%;
   }

   .table-style02 div.numbering:before {
      content: '編號 :';
      padding-right: 10px;
      color: #9c9c9c;
   }

   .table-style02 div.series {
      width: 100%;
   }

   .table-style02 div.series:before {
      content: '系列 :';
      padding-right: 10px;
      color: #9c9c9c;
   }

   .table-style02 div.name {
      width: 100%;
   }

   .table-style02 div.name:before {
      content: '名稱 :';
      padding-right: 10px;
      color: #9c9c9c;
   }

   .table-style02 div.time {
      width: 100%;
      text-align: left;
   }

   .table-style02 div.time:before {
      content: '時間 :';
      padding-right: 10px;
      color: #9c9c9c;
   }
   .form-type .form-content .list02 { width: 100%; display: block;}
   .form-type .form-content .list02 label { width: 100%; }
   .form-type .form-content .list label { width: 100px;}
   .form-type .form-content .adress-box { max-width: 100%;}


}

@media screen and (max-width: 520px) {
   .product .series-list .item {
      width: 100%;
      margin: 0 0 20px 0;
      float: none;
   }

   .funtion-box {
      height: auto;
   }

   .dealer-tool .info-list li .tool {
      position: relative;
      padding: 10px;
      width: 100%;
   }

   .dealer-tool .info-list li .tool div.PDF,
   .dealer-tool .info-list li .tool div.JPG,
   .dealer-tool .info-list li .tool div.ZIP {
      margin: 2px 0 0 5px;
   }
}

@media screen and (max-width: 480px) {
   .pc-display {
      display: none;
   }

   .mobile-display {
      display: block;
   }

   .series-detail .pro-title {
      font-size: 28px;
   }

   .product-banner .series-tool a {
      padding: 5px 0px;
      width: 100px;
   }

   .product-banner .series-tool a span {
      margin: 0 4px 3px 0;
   }

   .product .product-list {
      margin: 0;
   }

   .product .product-list .item {
      width: 100%;
      margin: 0;
   }

   /* authorization */
   .authorization .authorization-list li {
      width: 100%;
      margin: 3px 0;
      padding-left: 20px;
   }

   /* video*/
   .video ul {
      margin: 0 -1%;
   }

   .video ul li {
      width: 48%;
   }

   .main-box .right-box {
      padding: 0px;
   }

   .quarterly {
      padding: 0;
   }

   .product .pro-lis .box .info .unit .data span {
      font-size: 14px;
   }

   /* pop */
   .pop .box .pop-box .cont-box .close-btn {
      top: -45px;
      right: -20px;
   }

   .pop02 .box .pop-box .cont-box .mbody {
      height: 480px;
      font-size: 14px;
   }

   .pop02 .box .pop-box .cont-box .close-btn {
      top: -45px;
      right: -20px;
   }

   .form-type #dealer_mode span { display: block; width: 100%;}

   .form-type .form-content .list02 label { height: auto; line-height: 1.4em;}
   .guarantee .guarantee-info-table th { font-size: 14px;}
   .guarantee .guarantee-info-table td { font-size: 12px;}
}