/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Roboto', 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:1440px; width: 100%; margin:0 auto; text-align:right; position:relative; clear:both;}

#content { font-size: 16px; line-height:1.8; color: #333; letter-spacing: 0; font-weight: 400; padding-top: 100px;}

.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%;direction: rtl;}

.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.6vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(26px, 3.3vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(26px, 3.3vw, 42px); line-height: 1.3;}
.font-size-44 { font-size: clamp(26px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(26px, 3.5vw, 48px); line-height: 1.3;}
.font-size-60 { font-size: clamp(32px, 4vw, 60px); line-height: 1.2;}

.font-roboto { font-family: "Roboto", sans-serif;}

.color-white { color: #fff !important;}
.color-red { color: #b61900 !important;}
.color-gray { color: #333 !important;}
.color-green { color: #408c73 !important;}

.align-center { text-align: center !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}

.weight-100 { font-weight: 100;}
.weight-300 { font-weight: 300;}
.weight-400 { font-weight: 400;}
.weight-500 { font-weight: 500;}
.weight-700 { font-weight: 700;}
.weight-900 { font-weight: 900;}

.p-layout { margin: 0; padding:0 0 calc(20px + 1%) 0; font-weight: 400; line-height: 1.8; font-size: 16px;}

.layout-wrap { display: flex; flex-direction: row; flex-wrap: wrap;}
.layout-nowrap { display: flex; flex-direction: row; flex-wrap: nowrap;}

.hr-type-1 { padding: 0 !important; margin: 20px 0 !important; border-color: #efefef !important;} 

.title-type-1 { padding-bottom: calc(10px + 1%);line-height: 1.3; display: block;}

.width-760 { margin: 0 auto; max-width: 760px;}
.width-1170 { margin: 0 auto; max-width: 1170px;}

.banner { position: relative;  z-index: 3; width: 96%; margin: 0 auto 15px auto; border-radius: 30px; overflow:hidden; height: 350px;}
.banner img { object-fit: cover; width: 100%; height: 100%;}
.banner-pc { }
.banner-mobile { display: none !important;}
.banner-title { position: absolute; z-index: 3; top:50%; transform: translateY(-50%); left: 0; width: 100%; padding: 0 5%; text-align: center; color: #fff; font-size: clamp(26px, 3.5vw, 48px); line-height: 1.1;}

.main-left-bg { position: relative;}
.main-left-bg:before { position: absolute; content: ""; z-index: -2; width: 475px; height: 1000px; background: #fff6e3; border-radius:0 5vw 5vw 0; right: 0; top:250px; }
.main-left-bg:after { position: absolute; content: ""; z-index: -1; right: 23%; top: 395px; background: url("../images/dot-bg.png") no-repeat top center / contain; width: 194px; height: 157px;}
.main-left-bg-2:before { top:0px; height: 840px; }
.main-left-bg-2:after { top:30px; }

.title-01 { position: relative; margin-bottom: calc(20px + 1.5%);}
.title-01:before { content: ""; position: absolute; width: 15px; height: 15px; background: #5cc8ae; border-radius: 100%; left: -15px; bottom: -15px;}
.title-01 > span { display: inline-block; line-height: 50px; border-radius: 26.5px 25px 25px 0; padding: 0 26px; background: #408c73; color: #fff; font-weight: 700; text-transform: uppercase; font-size: clamp(18px, 1.5vw, 20px);}

.btn-type-1 { display: block; width: 200px; line-height: 50px; background: transparent; color: #408c73 !important; text-align: center; font-size: 16px; border-radius: 27px;  position: relative; overflow: hidden; border: 2px solid #408c73;}
.btn-type-1 > span { position: relative; z-index: 2;}
.btn-type-1:after { background: #408c73; bottom: 0; width: 0%; height: 100%; right: -10px; content: ""; display: block; position: absolute;transition: all 0.25s ease-out 0s; transform: skewX(-20deg);}
.btn-type-1:hover { width: 190px; color: #fff !important;}
.btn-type-1:hover:after { width: 120%; left: -10px;}

.title-02 { font-weight: 500; font-size: clamp(26px, 3.5vw, 48px);}

#path { padding: 0 0% 0 0%;margin-bottom: calc(20px + 3%);}
#path ul { margin: 0; padding: 0 0; ;line-height: 1.3;}
#path li { display: inline-block; vertical-align: top; font-size: 14px; font-weight: 400; color: #bbbbbb}
#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: #bbbbbb; }
#path li a:hover { color: #408c73;}
#path li:last-child a { color: #bbbbbb;}

/*about*/
.about-title { text-align: center;position: relative; font-weight: 700; color: #333; font-size: clamp(22px, 3.3vw, 36px); line-height: 1.2; padding: calc(15px + 1%) 3vw 15px 3vw; margin: 0 0 calc(10px + 1%) 0; letter-spacing: 0;font-family: 'Roboto', sans-serif; display: inline-block;}
.about-title:before, .about-title:after { content: "“"; position: absolute; color: #408c73; font-size: 6vw; font-family: "Noto Sans TC", sans-serif; line-height: 0;}
.about-title:before { top: 35%; left: -5%;}
.about-title:after { bottom: 0px; right: -2%;}

.about-content-1 { display: flex; flex-direction: column; flex-wrap: nowrap; padding-top: 35px; padding-bottom: calc(20px + 2%);}
.about-content-1 > div { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: calc(20px + 4%);}
.about-content-1 > div > div { width: 48.5%;}
.about-content-1 > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.about-content-1 > div:nth-child(even) > div:nth-of-type(2) { order: 1;}

.pto-type-1 { border-radius: 0 3.5vw; width: 100%;}

.idx-advantage-list { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-top: 25px;}
.idx-advantage-list > div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; padding: 32px; width: 50%; position: relative;}
.idx-advantage-list > div:nth-of-type(1):before, .idx-advantage-list > div:nth-of-type(2):before { content: ""; position: absolute; right: 0; bottom: 0; width: calc(100% - 32px); height: 1px; background: #e9e9e9;}
.idx-advantage-list > div:nth-of-type(2):before { left: 0; right: auto;}
.idx-advantage-list > div:nth-of-type(1):after, .idx-advantage-list > div:nth-of-type(3):after { content: ""; position: absolute; left: 0; top: 0; height: calc(100% - 32px); width: 1px; background: #e9e9e9;}
.idx-advantage-list > div:nth-of-type(3):after { top: auto; bottom: 0;}
.idx-advantage-list > div > div:nth-of-type(1) { position: relative; margin-bottom: 25px;}
.idx-advantage-list > div > div:nth-of-type(1) img { width: 60px;}
.idx-advantage-list > div > div:nth-of-type(1):before { position: absolute; content: ""; z-index: -1; width: 66px; height: 66px; border-radius: 100%; top: -3px; right: -32px; background: #fff6e3;}
.idx-advantage-list > div > div:nth-of-type(2) { font-weight: 500; text-transform: uppercase; text-align: center; line-height: 1.3;}

.about-section-2 { position: relative; padding:calc(20px + 3.5%) 5%; direction: rtl;}
.about-section-2:after { position: absolute; content: ""; z-index: -2; width: 65%; height: 100%; background: #fffaf0; border-radius:5vw 0 0 0; left:0; top:0px; }
.about-section-2-slogn { position: absolute; z-index: -1; top:-40px; right: 0; width: 55%; }

.about-content-2 { padding-bottom: 0;}

/*products*/
.title-03 { text-align: center;font-weight: 500; color: #333; font-size: clamp(22px, 3.3vw, 36px); line-height: 1.2; padding:0 0 calc(15px + 1%) 0; margin: 0 0 0 0; letter-spacing: 0;font-family: 'Roboto', sans-serif; }

.products-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -70px; padding-top: 35px;}
.products-list > a { margin: 0 0 90px 70px; width: calc(50% - 70px); position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.products-list > a:hover .products-list-pto { transform: translateY(0px);}
.products-list > a:hover .products-list-btn { background: #408c73; border-color: #408c73; transform: rotate(90deg);}
.products-list > a:hover .products-list-btn:after { border-color: #fff;}
.products-list > a:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: calc(100% - 35px); border: 1px solid #dfdfdf; z-index: -1;}
.products-list > a > div {width: 50%;}
.products-list > a > div:nth-of-type(2)  {width: 50%; padding-right: 28px; padding-left: 18px; padding-top: 25px; padding-bottom: 25px;}
.products-list-pto  { border: 1px solid #dfdfdf; padding-bottom: 100%; transform: translateY(-35px); background: #fff;transition: all 0.4s ease-out 0s;}
.products-list-name  { border-bottom: 1px solid #e3e3e3; font-weight: 500;font-size: clamp(18px, 1.5vw, 20px); padding-bottom: 18px; margin-bottom: 20px; color: #333; line-height: 1.3;}
.products-list-btn  { width: 40px; height: 40px; border-radius: 100%; border: 1px solid #dfdfdf; position: relative;transition: all 0.4s ease-out 0s;}
.products-list-btn:after  { position: absolute; content: ""; width: 8px; height: 8px; border-width: 1px 1px 0 0; border-style: solid; border-color: #b6b6b6; transform: translate(-50%, -50%) rotate(-135deg); top:50%; left: 53%;transition: all 0.4s ease-out 0s;}

#page { text-align: center; padding:0 0 calc(20px + 4%) 0;}
#page a { font-size: 16px; color: #444; 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: #408c73; color: #fff;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #444; border-right: 1px solid #444; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(45deg);}
.page-next { transform: rotate(-135deg);}

/*products-list*/
.products-list-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;direction: rtl;text-align: right;}
.products-list-section > div:nth-of-type(1) { width: 475px; padding-top: 75px;}
.products-list-section > div:nth-of-type(2) { width: calc(100% - 475px); padding-left: 10%; padding-right: 5%;}

aside { width: 242px; margin: 0 auto 0 0;}

.third-menu { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%);}
.third-menu > a { display: inline-block; margin: 0 0.5vw 5px 0; line-height: 46px; border-radius: 24px; border: 1px solid #408c73; color: #408c73; min-width: 160px; padding: 0 14px; text-align: center;}
.third-menu > a:hover, .third-menu > a.current { background: #408c73; color: #fff; }

.products-list2 { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -34px; }
.products-list2 > a { margin: 0 0 calc(20px + 2.5%) 34px; width: calc(33.33% - 34px); }

.pro-link {display: block; padding: 0 1px;}
.pro-link:hover .pro-link-pto-box { transform: scale(0.9);box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
.pro-link-pto-box { border: 1px solid #dfdfdf; padding:20px; margin-bottom: 15px; transition: all 0.3s ease-out 0s;}
.pro-link-pto { padding-bottom: 100%;}
.pro-link-name { text-align: center;font-size: clamp(18px, 1.5vw, 20px); color: #333; font-weight: 500; direction: rtl;}


/*products-detail*/
.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 4%);}
.products-detail-top > div:nth-of-type(1) { width: 50%; padding-left: 5%;}
.products-detail-top > div:nth-of-type(2) { width: 50%; padding-right: 20px; padding-top: 20px;}

.products-detail-top-left { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.products-detail-top-left > div:nth-of-type(1) { width: calc(100% - 100px - 15px); position: relative; margin-left: 15px; background: #fff; border-radius: 10px; border: 1px solid #dfdfdf; overflow: hidden;}
.products-detail-top-left > div:nth-of-type(2) { width: 100px;position: relative;}


.swiper-container {
  overflow: hidden;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-container-wrapper {
  display: flex;
  flex-flow: column nowrap;
}
@media (min-width: 480px) {
  .swiper-container-wrapper {
    flex-flow: row nowrap;
  }
}

.gallery-next, .gallery-prev {position: absolute; width: 12px; height: 12px; border-width: 2px 2px 0 0; border-style: solid; border-color: #333; left: 45%; transform: translateX(-50%);}
.gallery-prev { top: -25px; transform: rotate(-45deg);}
.gallery-next { bottom: -25px; transform: rotate(135deg);}

.swiper-slide {
  text-align: center;
  background-size: cover;
  background-position: center;
  /* Center slide text vertically */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  /* Slide content */
}


.gallery-top {
  position: relative;
  width: 100%;
}
@media (min-width: 480px) {
  .gallery-top {
    width: 100%;
    margin-right: 10px;
  }
}

.gallery-thumbs {
  width: 100%;min-height: 430px;
    height: 0;
  padding-top: 0px;
}
@media only screen and (max-width: 980px) {
  .gallery-thumbs {min-height: 150px;}
	.gallery-next, .gallery-prev { left: 37%;}
	.gallery-prev { top: -15px; }
	.gallery-next { bottom: -15px; }
}
.gallery-thumbs .swiper-wrapper {
  flex-direction: row;
}
@media (min-width: 480px) {
  .gallery-thumbs .swiper-wrapper {
    flex-direction: column;
  }
}
.gallery-thumbs .swiper-slide {
  width: 100%;
  flex-flow: row nowrap;
  height: 100%;
  cursor: pointer; border-radius: 10px; border: 1px solid #dfdfdf; overflow: hidden; background: #fff; display: flex;
}
@media (min-width: 480px) {
  .gallery-thumbs .swiper-slide {
    flex-flow: column nowrap;
    width: 100%;
  }
}
.gallery-thumbs .swiper-slide-thumb-active {
  border-radius: 10px; border: 2px solid #4a927a;
}

.btn-box-2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-top: 40px; }
.btn-box-2 > a { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; position: relative;}
.btn-box-2 > a:nth-of-type(1):after { content: ""; position: absolute; width: 1px; height: 30px; background: #d5d5d5; top:50%; left: 0; transform: translateY(-50%);}
.btn-box-2 > a > div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100%; border: 1px solid #d5d5d5;}
.btn-box-2 > a > span { display: inline-block; text-transform: uppercase; color: #b2b2b2; font-size: 15px; line-height: 1; padding: 0 20px;}
.btn-box-2 > a:hover { transform: scale(0.9);}
.btn-box-2 > a > div img{transform: scaleX(-1);}

.btn-box-1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: 20px;}
.btn-box-1 > div { margin: 0 0 15px 2vw;}
.btn-box-1 .layout-nowrap > div{ padding: 0 0 0 8px!important;}


#cms-amount-panel {display: flex; flex-direction: row; align-items: center;}
#cms-amount-panel > div { /*font-weight:bold;*/}
#cms-amount-panel > div:nth-child(1) {padding: 0;}
.cms-amount-value {border: 1px solid #e3e3e3; display: flex; flex-direction: row; height: 40px;}
#cms-amount-panel button { width:30px; font-size: 16px; color: #333333; background-color: #fff !important; border: 0;}
#cms-amount-panel input[type="text"] { width:54px; font-size: 16px; text-align:center; border: 0; border-width: 0 1px; border-style: solid; border-color:#e3e3e3; }


.btn-inquiry { width: 270px; height: 50px; border-radius: 27px; border: 2px solid #408c73; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0 14px 0 25px; }
.btn-inquiry > div { color: #408c73; }
.btn-inquiry > img { width: 25px; }
.btn-inquiry:hover { background: #408c73; }
.btn-inquiry:hover > div { color: #fff; }
.btn-inquiry:hover > img { filter: brightness(0) invert(1);}

.title-04 { position: relative; text-align: center; margin-bottom: calc(20px + 1%);}
.title-04:after { content: ""; position: absolute; z-index: -1; width: 100%; height: 1px; background: #e5e5e5; top:50%; transform: translateY(-50%); left: 0;}
.title-04 > span { display: inline-block; line-height: 1.2; padding: 0 15px; background: #fff; font-weight: 500;font-size: clamp(22px, 3.3vw, 36px);}

.loop2 { padding:10px 0 calc(20px + 3%) 0; margin-bottom: calc(20px + 4%); direction: ltr;}
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative;  }
.loop2 .owl-nav { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { width: 50px !important; height: 50px !important; border-radius: 100% !important; border: 1px solid #333333 !important; position: absolute; z-index: 2; display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%);transition: all 0.4s ease-out 0s; opacity: 0.16; background: none !important;}
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { transform: translateY(-50%); opacity: 1;}
.loop2 .owl-prev { left:0px; }
.loop2 .owl-next { right:0px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { content: ""; position: relative; width: 10px; height: 19px;  transition: all 0.4s ease-out 0s; display: block; margin-top: -0px; }
.loop2 .owl-prev:before { background: url("../images/tool-prev.png") no-repeat top center / contain;}
.loop2 .owl-next:before { background: url("../images/tool-next.png") no-repeat top center / contain;}
.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:-7px; 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: #cacaca !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: #408c73 !important; }

/*news*/
.news-top-section { max-width: 800px; margin: 0 auto calc(20px + 1%) auto;}
.news-top-section .third-menu { justify-content: center;}

.news-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -42px; }
.news-list > a { margin: 0 42px calc(20px + 3.5%) 0; width: calc(33.33% - 42px);}

.idx-news-link { display: block; background: #fff; overflow:hidden; border-radius: 20px; border: 1px solid #f1f1f1;}
.idx-news-link:hover { transform: scale(0.92);}
.idx-news-pto { padding-bottom: 67%;}
.idx-news-pto img { transition: all 0.4s ease-out 0s;}
.idx-news-content { padding: 25px 30px;}
.idx-news-content-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 20px;}
.idx-news-content-top > div { margin-bottom: 10px;}
.idx-news-content-top > div:nth-of-type(1) { line-height: 30px; border-radius: 15px; background: #5cc8ae; color: #fff; padding:0 12px; margin-right: 15px;}
.idx-news-content-top > div:nth-of-type(2) { font-size: 15px; color: #a9a9a9; line-height: 1;}
.idx-news-content-title { color: #000; line-height: 1.3; padding-bottom: 20px;font-size: clamp(18px, 1.5vw, 20px); white-space:nowrap; text-overflow : ellipsis; overflow:hidden;}
.idx-news-content-btn { text-align: right; text-decoration: underline; color: #408c73; font-size: 15px;}

/*contact*/
.contact-info-section { background: #408c73; border-radius: 15px; padding: 30px 0 35px 0; margin-bottom: calc(20px + 4%);display: flex; flex-direction: row; flex-wrap: wrap; }
.contact-info-section > div { position: relative; width: 33.33%; padding: 0 5%;}
.contact-info-section > div:after { position: absolute; content: ""; width: 1px; height: 70%; top: 50%; right: 0; transform: translateY(-50%); opacity: 0.3; background: #fff;}
.contact-info-section > div:last-child:after { display: none;}
.contact-info-top { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; margin-bottom: 5px; font-size:clamp(21px, 2.3vw, 28px); font-weight: 700; color: #fff;}
.contact-info-top > img { height: 28px; display: inline-block; margin-left: 10px; filter: invert(1) brightness(100%);}
.contact-info-data { line-height: 1.6; color: #fff;}
.contact-info-data a,.contact-info-data a:visited, .contact-info-data span{ color: #fff; }

.align-center { text-align: center;}

.contact-section-2 { padding-bottom: calc(20px + 4%);}

.contact-layout-1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-1 > div { width: calc(50% - 25px);}
.contact-layout-2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-layout-2 > div:nth-of-type(1) { width: 67%;}
.contact-layout-2 > div:nth-of-type(2) { width: 33%;}

.contact-form-list {  display: flex; flex-direction: row; flex-wrap: nowrap; padding: 0 0 20px 0; }
.contact-form-list > div:nth-of-type(1) { width: 125px; position: relative; padding-top: 5px; padding-right: 22px;}
.contact-form-list > div:nth-of-type(1) span { color: #f3a313; position: absolute; top:4px; right: 0;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 125px); padding-left: 0px;}

.contact-form-list2 { padding: 0 0 20px 0;}

.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: #e1e1e1; margin: 0px 0 0px 0; width: 100%; padding:0px 15px ; color:#333; background: #fff; font-family: "Roboto", sans-serif; line-height: 40px; border-radius: 5px; }
.contact-form textarea { height:190px; padding:15px; resize:none; line-height: 140%;}
.contact-form select{ margin: 0 0 0px 0;  width:100%; max-width: 100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: 15px 16px; background-size: 14px 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: #fff; ; border-width:1px; border-style: solid; border-color: #e1e1e1; color:#333; font-family: "Roboto", sans-serif;  padding:0px 15px 0px 35px;  line-height: 40px; border-radius:5px;}
.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: 15px; padding-right: 22px; 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;right: 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: #408c73;}
.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: #408c73; border-radius: 100%;}

.contact-note3 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 15px; padding-right: 22px; 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; font-size: 16px; font-weight: 400;}
.contact-note3 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;left: 0;}
.checkmark2 {position: absolute;width: 24px;height: 24px; background: #fff; border-radius: 5px; right: -8px; top: -2px; border:1px solid #d1d1d1;}
.contact-note3:hover input ~ .checkmark2 {background-color: #fff;}
.contact-note3 input:checked ~ .checkmark2 {border-color: #408c73;}
.checkmark2:after {content: "";position: absolute;display: none;}
.contact-note3 input:checked ~ .checkmark2:after {display: block;}
.contact-note3 .checkmark2:after {top: 2px;left:6px;height: 15px;width: 10px;background-color: transparent; border-width: 0 3px 3px 0; border-color: #408c73; border-style: solid; transform: rotate(45deg);}

.contact-btn img{transform: rotate(-180deg);}

.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-100 { width: 100% !important;}

.contact-policy { padding-bottom: calc(20px + 2%); text-align: center;}

.btn01 { display: block; width: 200px; line-height: 50px; text-align: center; color: #fff !important; background: #408c73; border-radius: 25px; overflow: hidden; position: relative; transition: all 0.4s ease-out 0s; border-width: 0;}
.btn01 > span { position: relative; z-index: 3;}
.btn01:before { content: ""; position: absolute; transition: all 0.4s ease-out 0s; width: 20px; height: 20px; right: -30px; bottom: -30px; background: #5cc8ae; border-radius: 100%; }
.btn01:hover:before {  width: 200%; height: 270%; }
.btn01:hover {  width: 170px;}

.contact-btn .btn01 { margin-left: auto; margin-right: auto;}

@media only screen and (max-width: 1279px) {
    #content { padding-top: 60px; line-height: 1.6; }
	
	.p-layout { line-height: 1.6;}

	.banner { height: 250px;}
	.main-left-bg:before { top:150px; }
	.main-left-bg:after { top: 295px; }

	aside { width: 100%;}
	.products-list-section { padding: 0 5%;}
	.products-list-section > div:nth-of-type(1) { width: 100%; padding-top: 0px; padding-bottom: 20px;}
	.products-list-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0%; padding-right: 0%;}
	
	.loop2 .owl-prev, .loop2 .owl-next{ width: 35px !important; height: 35px !important; }
	.loop2 .owl-prev:before, .loop2 .owl-next:before { width: 6px; height: 11px;}
	
	.loop2 { padding:20px 50px calc(20px + 3%) 50px; }
	
	.contact-info-section { padding-bottom: 0;}
	.contact-info-section > div { width: 100%; padding: 0 5% 20px 5%; margin-bottom: 20px;}
	.contact-info-section > div:after { width: 90%; height:1px; top: auto; right: 50%; bottom: 0;transform: translateY(0%) translateX(50%);}
	.contact-info-data { text-align: center;}
	
	.contact-layout-1 > div { width: 100%;}
	.contact-form-list2 { padding-right: 125px;}
}


@media only screen and (max-width: 980px) {
	#path { margin-bottom: calc(10px + 1%);}
	
	.banner-pc { display: none !important;}
	.banner-mobile { display: block !important;}
	
	.btn-type-1 { width: 160px; line-height: 40px; font-size: 15px;}
	.btn-type-1:hover { width: 150px;}
	
	.main-left-bg:before { width: 50%; }
	.main-left-bg:after { left: 14%;}
	
	.about-content-1 > div > div { width: 100%;}
	.about-content-1 > div > div:nth-of-type(1) { margin-bottom: 25px;}
	.about-content-1 > div:nth-child(even) > div:nth-of-type(1) { order: 1;}
	.about-content-1 > div:nth-child(even) > div:nth-of-type(2) { order: 2;}
	
	.third-menu > a {  min-width: 120px; }
	
	.products-detail-top > div:nth-of-type(1) { width: 100%;  padding-right: 0%;}
	.products-detail-top > div:nth-of-type(2) { width: 100%; padding-left: 0%; padding-top: 25px;}
	.products-detail-top-left > div:nth-of-type(1) { width: calc(100% - 50px - 15px);}
	.products-detail-top-left > div:nth-of-type(2) { width: 50px;}
	
	.btn-inquiry { width: 240px; padding-right: 20px;  }
	
	.news-list > a { width: calc(50% - 42px);}
	.idx-news-content { padding: 25px 20px;}
}
@media only screen and (max-width: 768px) {
	.products-list2 > a { width: calc(50% - 34px); }
	
	.contact-layout-2 > div:nth-of-type(1) { width: 100%;}
	.contact-layout-2 > div:nth-of-type(2) { width: 100%;}
}
@media only screen and (max-width: 640px) {
	.products-list { margin-left: 0px;}
	.products-list > a { margin: 0 0px 60px 0; width: 100%; }
	.products-list > a:last-child { margin: 0 0px 50px 0;  }
	.products-list > a > div:nth-of-type(2)  { padding-right: 18px; padding-top: 25px; padding-bottom: 25px;}
	
	
}
@media only screen and (max-width: 570px) {
	.banner { height: 180px;}
	
	.idx-advantage-list > div { width: 100%;}
	.idx-advantage-list > div:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100% !important; height: 1px; background: #e9e9e9;}
	.idx-advantage-list > div:after { display: none;}
	
	.news-list > a { width: calc(100% - 42px);}
}

@media only screen and (max-width: 414px) {
	.about-title:before, .about-title:after { display: none;}
	
	.products-list2 > a { width: calc(100% - 34px); }
}

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