/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:960px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 19px; line-height:2; color: #3e3a39; letter-spacing: 0.05rem; font-weight: 400; padding-top: 106px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 19px;line-height:2;  font-weight: 400;}
p, td, li, label { font-size: 19px !important;line-height:2 !important;  font-weight: 400 !important;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

.demo-section { padding-left: 5%; padding-right: 5%;}

.title01 {  text-align: center; padding:0 0 calc(20px + 2%) 0; margin: 0; font-size: clamp(23px, 2.3vw, 36px); line-height: 1.5; letter-spacing: 0.05rem; font-weight: 400;}

#path { opacity: 0.6;}
#path ul { margin: 0; padding: 15px 0; ;line-height: 1.3;}
#path li { display: inline-block; vertical-align: top; font-size: 15px; }
#path li:after { content:"/"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #555555; }
#path li a:hover { opacity: 0.6;}
#path li:last-child a { color: #555555;}

/*products*/
.products-box { padding-top: calc(20px + 2.5%);}

aside { padding-bottom: calc(20px + 2%);}

.title02 {  padding:0 0 18px 0; margin-bottom: calc(20px + 1%); font-size: clamp(19px, 1.2vw, 24px); line-height: 1.3; letter-spacing: 0.05rem; border-bottom: 1px solid #999999;}
h1.title02 { padding:0 0 18px 0; margin:0; margin-bottom: calc(20px + 1%); font-size: clamp(19px, 1.2vw, 24px); line-height: 1.3; letter-spacing: 0.05rem; border-bottom: 1px solid #999999;font-family: 'Noto Sans TC', sans-serif;font-weight:400; }

.p-list-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.p-list-1 > div { padding-bottom: calc(20px + 3%); width: calc(50% - 20px);}
.p-list-1-pto { padding-bottom: 67%; display: block; margin-bottom: 18px; position: relative;}
.p-list-1-pto img { transition: all 2s ease-out 0s;}
.p-list-1-pto:hover img { transform: scale(1.1);}
.p-list-1-title { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.p-list-1-title > div { padding-bottom:10px; font-size: 20px; line-height: 1.3;}
.p-list-1-name { font-weight: 500;}
.p-list-1-cash, .p-list-1-cash small { font-weight: 700;}
.p-list-1-data { line-height: 1.4; height: 48px; margin-bottom: 12px; font-size: 16px; color: #999;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}

.btn01 { display: block; width: 100px; line-height: 40px; border-radius: 20px; background: #fff; text-align: center; border: 1px solid #3e3a39; color: #3e3a39; font-size: 18px; letter-spacing: 0.2rem; transition: all 0.4s ease-out 0s;}
.btn01:hover { background: #3e3a39; color: #fff; transform: scale(0.9);}

.p-list-1-pto:hover .line-1, .p-list-1-pto:hover .line-2, .p-list-1-pto:hover .line-3, .p-list-1-pto:hover .line-4 {position: absolute; z-index: 4;;animation-duration: 0.5s; animation-timing-function:linear; animation-fill-mode: both; display: block;}
.p-list-1-pto:hover .line-1 {  top: 0;left: 0; width: 100%; height: 3px;  animation-name: line-1;background:  linear-gradient(90deg, #ddd 0%, #fff 100%);}
.p-list-1-pto:hover .line-2 {  top: 0;left: 0; width: 3px; height: 100%;  animation-name: line-2;background:  linear-gradient(0deg, #fff 0%, #ddd 100%);}
.p-list-1-pto:hover .line-3 {  top: 0;right: 0; width: 3px; height: 100%;  animation-name: line-3; animation-delay: 0.5s;background:  linear-gradient(0deg, #fff 0%, #ddd 100%);}
.p-list-1-pto:hover .line-4 {  bottom: 0;left: 0; width: 100%; height: 3px;  animation-name: line-4; animation-delay: 0.5s;background:  linear-gradient(90deg, #ddd 0%, #fff 100%);}
@keyframes line-1 {
  0% {left: -100%;}
  50% {left: 0;}
  100% {left: 100%;}
}
@keyframes line-2 {
  0% {top: -100%;}
  50% {top: 0;}
  100% {top: 100%;}
}
@keyframes line-3 {
  0% {top: -100%;}
  50% {top: 0;}
  100% {top: 100%;}
}
@keyframes line-4 {
  0% {left: -100%;}
  50% {left: 0;}
  100% {left: 100%;}
}

.p-list-1-b { justify-content:flex-start; margin-right: -30px;}
.p-list-1-b > div { margin-right: 30px; width: calc(33.33% - 30px);}

#page { text-align: center; padding:0 0 calc(20px + 3%) 0;}
#page a { font-size: 16px; color: #333; font-weight: 400; width: 30px; height: 30px; line-height: 28px; text-align: center; border-radius: 100%; display: inline-block;}
#page a:hover, #page a.current { background: #3e3a39; color: #fff;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #333; border-right: 1px solid #333; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

/*products-detail*/
.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: 20px;}
.products-detail-top > div { padding-bottom: calc(20px + 1%);}
.products-detail-top > div:nth-of-type(1) { width: calc(100% - 370px); padding-right:calc(20px + 5%); padding-left: calc(20px + 1%); position: sticky; top:90px;}
.products-detail-top > div:nth-of-type(2) { width: 370px;}

.products-detail-tool { position: relative;}
   .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: inline-block;
      /*max-width: 800px; width: 100%;
      height: 100%;
      object-fit: cover;*/
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    .swiper-slide {
      background-size: cover;
      background-position: center; padding: 0 5px;
    }
    .imgBox {height: 0; overflow: hidden; padding-bottom: 66.183%; position: relative; z-index: 1; line-height: 0; font-size: 0;}

    .mySwiper2 {
      height: 80%;
      width: 100%; margin-bottom: 10px;
    }

    .mySwiper {
      height: auto;
      box-sizing: border-box;
    }

    .mySwiper .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

.swiper-next, .swiper-prev { width: 30px !important; height: 30px !important; border-radius: 100%; background: #3e3a39; border: 0px solid #074151; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%);}
.swiper-next:hover, .swiper-prev:hover { opacity: 0.6 !important;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 12px; height: 12px ; border-width: 1px 1px 0 0; border-color: #fff; border-style: solid; position: relative;}
.swiper-prev:after { transform: rotate(-135deg); left: 3px;}
.swiper-next:after { transform: rotate(45deg); right: 3px;}
.swiper-prev { left: -10px;}
.swiper-next { right: -10px;}

.p-detail-title { padding: 0 0 8px 0; margin: 0; line-height: 1.2; font-weight: 700; font-size: clamp(25px, 3vw, 42px); letter-spacing: 0.05rem;}
.p-detail-cash { font-weight: 700; font-size: clamp(19px, 1.2vw, 24px); padding-bottom: calc(30px + 1%); line-height: 1;}

.title03 { font-size: clamp(19px, 1.2vw, 25px); font-weight: 500; line-height: 1.2; padding-bottom: 10px;}

.p-color-list { display: flex; flex-direction: row; flex-wrap: wrap; /*padding-bottom: 25px;*/}
.p-color-list > div { cursor: pointer; border: 1px solid #3e3a39; margin: 0 15px 15px 0; width: 50px; height: 50px; border-radius: 100%;}
.p-color-list > div.current { border: 2px solid #be0000;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);}
.p-note { font-size: 16px; padding-bottom: 16px; line-height: 1.3;}

.p-choice-1-list { display: flex; flex-direction: column; flex-wrap: nowrap;}
.p-choice-1 {margin-bottom: 15px; border-radius: 15px; line-height: 1; padding: 20px 20px; background: transparent; border: 1px solid #999999; cursor: pointer; letter-spacing: 0.05rem; text-align: center; width: 100%; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.p-choice-1.current {background: #3e3a39; color: #fff;}
.p-choice-1 > div:nth-of-type(1) { font-weight: 500; font-size:clamp(19px, 1.2vw, 25px); text-align: left}
.p-choice-1 > div:nth-of-type(1) > span { display: block; font-weight: 300; font-size:14px; padding-top: 6px; }
.p-choice-1 > div:nth-of-type(2) { font-size:16px; }

.p-choice-btn { padding-bottom: calc(20px + 1%); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end;}
.p-choice-btn:hover > span { transform: rotate(360deg) scale(0.8);}
.p-choice-btn > div { display: inline-block; font-size: 16px; padding-right: 12px;}
.p-choice-btn > span { display: inline-block; width: 26px; height: 26px; border-radius: 100%; background: #3e3a39; position: relative;transition: all 0.4s ease-out 0s;}
.p-choice-btn > span:before, .p-choice-btn > span:after { content: ""; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 10px; height: 2px;}
.p-choice-btn > span:after { transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(90deg);}

.p-number { padding-bottom: calc(30px + 2%);}
.p-number input { border-radius: 15px; line-height: 1; padding: 20px 20px; background: transparent; border: 1px solid #999999; letter-spacing: 0.05rem; text-align: center; width: 100%;font-weight: 500; font-size:clamp(19px, 1.2vw, 25px);}
.p-number input { opacity: 1; color: #3e3a39; -moz-appearance: textfield;}
.p-number input::-webkit-outer-spin-button, .p-number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.p-add-list { display: flex; flex-direction: column; flex-wrap: nowrap;}
.p-add {margin-bottom: 15px; border-radius: 15px; line-height: 1; padding: 20px 20px; background: transparent; border: 1px solid #999999; cursor: pointer; letter-spacing: 0.05rem; text-align: center; width: 100%; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.p-add > div:nth-of-type(1) { display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 165px; text-align: left;}
.p-add > div:nth-of-type(1) > img { width: 55px;}
.p-add > div:nth-of-type(1) > div { font-size: 16px; line-height: 1.3; padding-left: 4px;}
.p-add > div:nth-of-type(1) > div > span { display: block;}

.p-add > div:nth-of-type(2) select{  margin: 0px 0 0 0; width:65px; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: 100% 7px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   margin-right:4px; background-color: transparent; font-size: clamp(19px, 1.2vw, 25px); border-width:0 0 0px 0; border-style: solid; border-color: #cccccc; mwidth: 100%; color:#3e3a39; font-family: 'Noto Sans TC', sans-serif; padding: 0 20px 0 0;  letter-spacing: 0.05rem; text-align: center;}
.p-add > div:nth-of-type(2) option { padding:1px 5px;}
.p-add > div:nth-of-type(2) select::-ms-expand {
    display: none;
}


.p-type-1 { padding-bottom: calc(30px + 2%);}
.p-type input { border-radius: 15px; line-height: 1; padding: 20px 20px; background: transparent; border: 1px solid #999999; letter-spacing: 0.05rem; text-align: center; width: 100%;font-weight: 500; font-size:clamp(19px, 1.2vw, 25px); margin-bottom: 12px;}
.p-type input::placeholder { opacity: 1; color: #3e3a39;}

.p-comment textarea { border-radius: 15px; line-height: 1; padding: 20px 20px; background: transparent; border: 1px solid #999999; letter-spacing: 0.05rem; text-align: left; width: 100%;font-weight: 400; font-size:16px; height:140px; resize: none;}
.p-comment textarea::placeholder { opacity: 1; color: #3e3a39;}

.p-result { margin-bottom: calc(25px + 4%); border-radius: 30px; background: #efefef; padding: calc(20px + 2%);display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.p-result > div:nth-of-type(1) { width: 40%; padding-right: 5%;}
.p-result > div:nth-of-type(1) span { display: inline-block;}
.p-result > div:nth-of-type(2) { width: 60%;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.p-result > div:nth-of-type(2) > div { width: 46%;}

.p-result-info { text-align:right; color: #666666; font-weight: 700; font-size:clamp(19px, 1.2vw, 26px); line-height: 1.2; }
.p-result-info small { font-weight: 700; }
.p-result-info > span { display: block; color: #3e3a39; font-size:clamp(26px, 3vw, 42px); line-height: 1; padding-top: 10px; }

.p-result-btn { display: block; width: 100%; line-height: 90px; border-radius: 45px; background: #77a067; color: #fff !important; font-size:clamp(19px, 1.2vw, 24px); text-align: center;}

.title04 { font-size: clamp(26px, 2vw, 32px); font-weight: 700; line-height: 1.2; padding-bottom: calc(20px + 2.5%);}

.p-bottom-content { display:flex; flex-direction: row; flex-wrap: wrap;border-bottom: 1px solid #cbcbcb; padding-bottom: 10px; margin-bottom:calc(20px + 3%);}
.p-bottom-content > div { padding-bottom: 30px; margin-bottom: 30px;}
.p-bottom-content > div:nth-child(odd) { width: 23%; padding-right: 3%;}
.p-bottom-content > div:nth-child(even) { width: 77%; border-bottom: 1px solid #cbcbcb;}
.p-bottom-content > div:last-child { border-width: 0;}

.loop2 { padding:0 0 calc(30px + 5%) 0;}
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative;  }
.loop2 .owl-nav { position: absolute; top: calc(50% - 40px); transform: translateY(-50%); left: 0%; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100;  width: 40px !important; height: 40px !important; border-radius: 100% !important; background: #3e3a39 !important; border: 0px solid #074151 !important; transition: all 0.4s ease-out 0s; top:50%; transform: translateY(-70%);}
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { background: #000 !important;}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { border-color: #fff;}
.loop2 .owl-prev { left:-20px; }
.loop2 .owl-next { right:-20px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { content: ""; position: absolute; width: 11px; height: 11px; border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; background-size: contain; background-repeat: no-repeat; top:50%; left: 50%; transition: all 0.4s ease-out 0s;}
.loop2 .owl-prev:before { transform:translate(-30%, -50%) rotate(-135deg);}
.loop2 .owl-next:before { transform:translate(-70%, -50%) rotate(45deg);;}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { }
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom:10px; left:0; width: 100%; text-align: center!important; padding: 0 0px; }
.loop2 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop2 .owl-dots .owl-dot.active {  }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #cfcfcf !important; width: 10px !important; height: 10px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important;}
.loop2 .owl-dots .owl-dot.active span/*, .loop2  .owl-dots .owl-dot:hover span*/ { background: #3e3a39 !important; }

/*news*/
.banner { position: relative; margin-bottom: calc(20px + 2.5%);}
.banner img { object-fit: cover; width: 100%; height: 100%;}
.banner-pc { height: 500px;}
.banner-mobile { display: none;}

.news-list > div { padding-bottom: calc(20px + 2%); width: calc(50% - 50px);}
.news-pto { padding-bottom: 60%;}

.news-list-content { padding-left: 18px; padding-right: 18px;}
.news-list-date, .news-list-tag { font-size: 16px; font-weight: 300; line-height: 1; padding-bottom: 10px;}
.news-list-name { font-size: 20px; font-weight: 500; line-height: 1.4; margin-bottom: 12px; height: 58px;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.news-list-tag {  padding-bottom: 0px;}

/*news-detail*/
.news-detail-box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 2%);}
.news-detail-box > div:nth-of-type(1) { width: 40%; padding-right: 8%; padding-top: calc(15px + 2%); position: sticky; top:90px; padding-bottom: 30px;}
.news-detail-box > div:nth-of-type(1) .title01 { text-align: left; line-height: 1.3;}
.news-detail-box > div:nth-of-type(1) .news-list-date { padding-bottom: calc(15px + 2%);}
.news-detail-box > div:nth-of-type(2) { width: 60%;}

.news-detail-tag { margin-bottom: calc(10px + 1%);}
.news-detail-tag > span {  display: inline-block; border-radius: 5px; color: #fff; background: #3e3a39; font-size: 14px; font-weight: 500; padding: 0 15px; line-height: 30px;}

.news-detail-note { font-size: 16px; font-weight: 300; color: #767e87; line-height: 1.2; padding-top: 10px; display: block;}

.news-detail-btn .btn01 { width: 150px; margin: 0 0 0 auto; border-radius: 22px;}

/*about*/
.about-section-1 { padding: calc(30px + 8.5%) 5%; display:flex;flex-direction: row; flex-wrap: nowrap; align-items: center; color: #fff;
background-image:linear-gradient(90deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0) 100%), url("../images/about-bg-1.jpg");
background-position: top left, center top;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}
.about-section-1-content { max-width: 820px; margin: 0 auto 0 0;}
.about-section-1-content .title01 { color: #fff; padding-bottom: calc(10px + 1.5%); text-align:left;}
.about-title-en { font-family: "Nothing You Could Do", serif; font-weight: 400; line-height: 1; padding-bottom: 10px; font-size:clamp(44px, 7vw, 90px); }

.about-section-2 { padding: calc(30px + 8.5%) 5%; display:flex;flex-direction: row; flex-wrap: nowrap; align-items: center; color: #fff;
background-image:linear-gradient(90deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0) 100%), url("../images/about-bg-2.jpg");
background-position: top left, center top;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}
.about-section-2-content { max-width: 820px; margin: 0 0 0 auto;}

/*contact*/
.contact-top-1 { max-width: 742px; margin: 0 auto; padding-bottom: calc(20px + 2%);}

.contact-layout-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-1 > div { width: calc(50% - 7px);}

.contact-form-list {  margin-bottom: 10px;display: flex; flex-direction: column; flex-wrap: nowrap; padding: 5px 0px; }
.contact-form-list > div:nth-of-type(1) { width: 100%; padding: 3px 0px;  position: relative;font-size: clamp(16px, 1vw, 19px); line-height: 170%; }
.contact-form-list > div:nth-of-type(1):after { position: absolute; content: ":"; top: 0; right: 0; display: none;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
.contact-form-list2 {  margin-bottom: 10px;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 5px 0px;font-size: clamp(16px, 1vw, 19px); }
.contact-form-list2 > div:nth-of-type(1) { width: 90px; padding: 3px 0px;  position: relative;line-height: 170%; }
.contact-form-list2 > div:nth-of-type(1):after { position: absolute; content: ":"; top: 0; right: 0; display: none;}
.contact-form-list2 > div:nth-of-type(2) { width: calc(100% - 90px); padding-left: 10px;}

.contact-form input[type="text"], .contact-form input[type="number"], .contact-form input[type="tel"], .contact-form input[type="phone"], .contact-form input[type="date"], .contact-form input[type="email"], .contact-form input[type="password"], .contact-form input[type="button"], .contact-form textarea { font-size: clamp(16px, 1vw, 19px); border-width:1px; border-style: solid; border-color: #cccccc; margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: transparent; font-family: 'Noto Sans TC', sans-serif; line-height: 40px; border-radius: 0px; }
.contact-form textarea { height:298px; padding:15px; resize:none; line-height: 140%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; max-width: 160px; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 10px) 16px; background-size: 14px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: clamp(16px, 1vw, 19px); border-width:1px; border-style: solid; border-color: #cccccc; color:#333; font-family: 'Noto Sans TC', sans-serif;  padding:0px 35px 0px 15px;  line-height: 40px; border-radius: 0px;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand {
    display: none;
}
.contact-note2 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 22px; padding-right: 15px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; color: #333; margin-bottom: 0;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 4px;left: 0;height: 16px;width: 16px;background-color: transparent; border: 1px solid #a4a4a4; border-radius: 100%;}
.contact-note2:hover input ~ .checkmark {background-color: #eeeeee;}
.contact-note2 input:checked ~ .checkmark {border-color: #3e3a39;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 2px;top: 2px;width: 10px;height: 10px; background: #3e3a39; border-radius: 100%;}

.color-red { color: #ff0000;}

.contact-bottom { background: #e4e4e3; padding: calc(20px + 2.5%) 5%;}
.contact-bottom-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.contact-bottom-section > div:nth-of-type(1) { width: 400px; padding-right: 5%;}
.contact-bottom-section > div:nth-of-type(1) .title01 { text-align:left;}
.contact-bottom-section > div:nth-of-type(2) { width: calc(100% - 400px);}

.contact-info-list { display: flex; flex-direction: column; flex-wrap: wrap; }
.contact-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.contact-info > div { margin-bottom: 12px;}
.contact-info > div:nth-child(odd) { width: 44px; height: 44px; border-radius: 100%; background: #3e3a39; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; }
.contact-info > div:nth-child(odd) img { width: 24px; }
.contact-info > div:nth-child(even) { width: calc(100% - 44px); padding-left: 10px; line-height: 1.1;font-size: clamp(16px, 1vw, 20px);}

.contact-map iframe { width: 100%; height: 600px; border-width: 0;}

@media only screen and (max-width: 1365px) {
    #content { padding-top: 60px;line-height:1.6; font-size: 16px;}
	#content p{ line-height:1.6; font-size: 16px;}
	p, td, li, label { line-height:1.6; font-size: 16px;}

	
}
@media only screen and (max-width: 1279px) {
	

}

@media only screen and (max-width: 980px) {
	.p-list-1-title > div { font-size: 17px;}
	.btn01 { width: 80px; line-height: 30px; font-size: 15px; }
	
	.p-list-1-b > div {  width: calc(50% - 30px);}
	
	.products-detail-top > div:nth-of-type(1) { width: calc(100% - 0px); padding-left: 0; padding-right: 0 ; position: relative; top:auto;}
	.products-detail-top > div:nth-of-type(2) { width: 100%;}
	
	.p-result { flex-direction: column;}
	.p-result > div:nth-of-type(1) { width: 100%; padding-right: 0%; padding-bottom: 25px;}
	.p-result > div:nth-of-type(2) { width: 100%;}
	.p-result > div:nth-of-type(2) > div:nth-of-type(1) { width: calc(100% - 200px);}
	.p-result > div:nth-of-type(2) > div:nth-of-type(2) { width: 200px;}
	.p-result-info {text-align: left;}
	.p-result-btn { line-height: 70px; border-radius: 35px; }
	
	.p-bottom-content > div:nth-child(odd) { width: 100%; padding-right: 0%; padding-bottom: 0; margin-bottom: 0;}
	.p-bottom-content > div:nth-child(even) { width: 100%; }
	
	.banner-pc { display: none;}
	.banner-mobile { height: 250px; display: block; }
	
	.news-detail-box > div:nth-of-type(1) { width: 100%; padding-right: 0%; padding-top: 0; position: relative; top:auto;}
	.news-detail-box > div:nth-of-type(1) .title01 { padding-bottom: 15px;}
	.news-detail-box > div:nth-of-type(2) { width: 100%;}
	
	
	.contact-bottom-section > div:nth-of-type(1) { width: 100%; padding-right: 0%; padding-bottom: 10px;}
	.contact-bottom-section > div:nth-of-type(1) .title01 { padding-bottom: 15px;}
	.contact-bottom-section > div:nth-of-type(2) { width: calc(100% - 0px);}
	.contact-map iframe { height: 300px;}
	
	.contact-info-list { flex-direction: row;}
	.contact-info-list > div { padding: 0 20px 0px 0; width: 50%;}

}
@media only screen and (max-width: 768px) {
	.contact-layout-1 > div { width: calc(100% - 0px);}
}
@media only screen and (max-width: 640px) {
	.p-list-1 > div { width: calc(100% - 0px);}
	
	.p-list-1-b{ margin-right: 0px; }
	.p-list-1-b > div { margin-right: 0px; width: 100%;}
	
	.news-list-content { padding-left: 0; padding-right: 0;}
	.news-list-name { font-size: 18px; height: 54px;}
	
}
@media only screen and (max-width: 570px) {
	.p-result > div:nth-of-type(2) > div:nth-of-type(1) { width: calc(100% - 0px); padding-bottom: 25px;}
	.p-result > div:nth-of-type(2) > div:nth-of-type(2) { width: 100%;}
	
	
}

@media only screen and (max-width: 414px) {
	.contact-info-list > div { width: 100%;}
	
}

@media only screen and (max-width: 320px) {
	
	
}