/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Open Sans', sans-serif; overflow-x: hidden; position: relative; background-color: #fafafa;
background-image:url("../images/main-bg-left.png"), url("../images/main-bg-right.png");
background-position: 0% 10%, 100% 4%;
background-repeat: no-repeat, no-repeat;
background-size: 48%, 48%;}
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:1200px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: clamp(16px, 1.3vw, 18px); line-height:1.7; color: #111; letter-spacing: 0; font-weight: 400; padding-top: 106px;}

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

.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); line-height: 1.3;}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3;}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3;}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(24px, 3.3vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(24px, 3.5vw, 42px); line-height: 1.3;}
.font-size-44 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-60 { font-size: clamp(28px, 4vw, 60px); line-height: 1.2;}

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

.color-blue { color: #003298;}
.color-green { color: #009fb4;}
.color-white { color: #fff;}
.color-red { color: #e80033;}
.color-gray { color: #a2a2a2;}

.bg-red { background: #d81c29;}
.bg-black { background: #111;}
.bg-gray-1 { background: #5a5a5a;}
.bg-gray-2 { background: #a5a5a5;}

.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-800 { font-weight: 800;}

.p-layout { margin: 0; padding:0 0 calc(20px + 2%) 0; font-weight: 400; line-height: 1.7; font-size: clamp(16px, 1.3vw, 18px);}

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

.margin-bottom-0 {margin-bottom: 0 !important;}

.banner { position: relative; margin-bottom: 30px;}
.banner-pc { }
.banner-mobile { display: none !important;}

.title01 { padding: 0 5% 35px 5%; margin-bottom: 35px; text-align: center; font-weight: 700;font-size: clamp(22px, 3.1vw, 36px); line-height: 1.2; position: relative;}
.title01:before { position: absolute; content: ""; height: 30px; width: 2px; background: #d81c29; bottom: 3px; left: 50%; transform: translateX(-50%);}
.title01:after { position: absolute; content: ""; height: 12px; width: 12px; background: #d81c29; bottom: -7px; left: 50%; transform: translateX(-50%); border-radius: 100%;}

.btn-type-1 { display: inline-block; padding: 0 20px; line-height: 60px; border-radius: 30px; text-align: center; color: #fff !important; font-weight: 700; font-size: clamp(16px, 1.3vw, 18px);background: #111;}
.btn-type-1:hover { background: #d81c29;}

.btn-type-2 { display: inline-block; padding: 0 20px; line-height: 34px; border-radius: 17px; border: 1px solid #111; font-size: 17px;}
.btn-type-2:hover { background: #d81c29; color: #fff; border:1px solid #d81c29;}

#path { padding: 12px 0 calc(20px + 2%) 0;}
#path ul { margin: 0; padding: 0 0; ;line-height: 1.3;}
#path li { display: inline-block; vertical-align: top; font-size: 15px; font-weight: 400; color: #999999;}
#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: #999999; }
#path li a:hover { opacity: 0.6;}
#path li:last-child a { color: #d81c29;}

.main-layout { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 2%);}
.main-layout > div:nth-of-type(1) { width: 242px; position: sticky; top:110px;}
.main-layout > div:nth-of-type(2) { width: calc(100% - 242px); padding-left: 45px;}

.aside-title { font-weight: 700;font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; margin-bottom: 14px;}

.aside-pto { line-height: 0; padding: 30px 0;}

/*about*/
.about-slogon { font-weight: 400; color: #d81c29; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; padding: 0; margin: 0 0 25px 0; letter-spacing: 0;}
.about-slogon b { font-weight: 700; }

/*technology*/
.technology-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 30px;}
.technology-section-1 > div:nth-of-type(1) { width: 65%; padding-right: 4%;}
.technology-section-1 > div:nth-of-type(2) { width: 35%; }

.technology-section-1-data { display: flex; flex-direction: column; flex-wrap: nowrap;}
.technology-section-1-data > div { border-bottom: 1px solid #cccccc; position:relative; padding: 5px 0 5px 20px; line-height: 1.3;}
.technology-section-1-data > div:before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 100%; box-shadow:inset 0px 0px 0px 3px #d81c29; left: 0; top:10px;}

.width-50-layout { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: calc(20px + 2%);}
.width-50-layout > div { width: 47%; }
.width-50-layout a:hover { text-decoration: underline; color: #111;}

.title-type-1 { line-height: 1.4; padding-bottom: calc(20px + 1%);}

.technology-title-box { border-bottom: 1px solid #cccccc; padding-bottom: 10px; margin-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; }
.technology-title-box > div:nth-of-type(1) { width: calc(100% - 100px); padding-right: 20px; }
.technology-title-box > div:nth-of-type(2) { width: 100px; }
.technology-title { position:relative; padding-left:20px; font-size: clamp(18px, 1.5vw, 20px); font-weight: 700;}
.technology-title:before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 100%; box-shadow:inset 0px 0px 0px 3px #d81c29; left: 0; top:10px;}
.technology-btn { display: block; background: #d81c29; color: #fff !important; font-weight: 700; font-size: 14px; border-radius: 15px; line-height: 30px; text-align:center;}
.technology-btn:hover { transform: scale(0.9);}

.technology-data { background: #f0f0f0; margin-bottom: 25px; padding: calc(20px + 1%) calc(20px + 1%) calc(20px + 2%) calc(20px + 1%);}

/*download*/
.title-h1 { font-weight: 700; font-size: clamp(25px, 3.3vw, 42px); line-height: 1.2; padding: 0; margin: 0 0 20px 0; letter-spacing: 0; text-align: center;}
.download-banner { border-radius: 0 50px;}

.idx-download-link { padding-bottom: calc(20px + 2%);}
.idx-download-link > a { position: relative; color: #111; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; border-bottom: 1px solid #ccc; padding: 16px 0 14px 0;}
.idx-download-link > a:hover:after { width: 100%; left: 0; }
.idx-download-link > a:hover > div:nth-of-type(1) { color: #e80033;}
.idx-download-link > a:hover > div:nth-of-type(2):before  { background: #e80033;}
.idx-download-link > a:hover > div:nth-of-type(2) img  { filter: none;}
.idx-download-link > a:after { content: ""; position: absolute; width: 0%; height: 1px; bottom: -1px; right: 0; background: #e80033;transition: all 0.4s ease-out 0s;}
.idx-download-link > a > div:nth-of-type(1) { width: calc(100% - 55px); color: #111; font-weight: 700; line-height: 1.3; padding-right: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.idx-download-link > a > div:nth-of-type(2) { width: 55px; position: relative; text-align: center;}
.idx-download-link > a > div:nth-of-type(2) img { width: 25px;  filter: brightness(0); transform: translateY(-7px)}
.idx-download-link > a > div:nth-of-type(2):before { content: ""; position: absolute; left: 0; top: 3px; width: 1px; height: 20px; background: #ccc;}

#page { text-align: center; padding:0 0 calc(20px + 4%) 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: #d81c29; 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*/
.products-list-section {display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #000; align-items: flex-start;}
.products-list-section > div:nth-of-type(1) { width: 45%;}
.products-list-section > div:nth-of-type(2) { width: 55%; padding: 20px 0 0 35px;}

.products-list-pto { display: block; padding-bottom: 67%; clip-path: polygon(0% 0, 100% 0%, 75% 100%, 0 100%);}
.products-list-pto:hover { clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);}

.products-list-title { display: block; position: relative;  margin-bottom: 20px; padding: 6px 0 10px 30px; font-weight: 700;font-size: clamp(22px, 3.3vw, 36px); line-height: 1.1;}
.products-list-title:hover { color: #d81c29;}
.products-list-title:before { content: ""; position: absolute; width: 10px; height: 100%; top: 0; left: 0; background: #d81c29;}
.products-list-link { padding-left: 30px;}
.products-list-link > a { display: block; font-size: 17px; line-height: 1.2; margin-bottom: 12px;}
.products-list-link > a:hover { color: #d81c29; text-decoration: underline;}

/*products-list*/
.products-list-2 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 1%);}
.products-list-2 > div { width: 50%; padding: 0 22px 50px 22px;}

.idx-pro-link:hover .idx-pro-pto img { transform: scale(1.1); filter: grayscale(100%);}
.idx-pro-pto { padding-bottom: 67%; position: relative; margin-bottom: 6px; display: block;}
.idx-pro-pto img { transition: filter 0.4s ease-out 0s, transform 2s ease-out 0s; }
.idx-pro-pto:before { /*content: "";*/ position: absolute; z-index: 4; left: 0; bottom: 0; width: 100%; height: 106px; background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);}
.idx-pro-title { font-weight: 700; font-size: clamp(18px, 1.5vw, 20px); padding-bottom: 3px;}
.idx-pro-data { color: #666666; margin-bottom: 15px; line-height: 1.3; font-size: 16px; min-height: 42px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.idx-pro-btn-box { display: flex; flex-direction: row; flex-wrap: wrap; }
.idx-pro-btn-box > a { margin: 0 10px 10px 0; }
.idx-pro-btn { display: block; min-width: 80px; line-height: 34px; border-radius: 17px; text-align: center; border: 1px solid #111; font-size: 17px; padding: 0 15px;}
.idx-pro-btn:hover { background: #d81c29; color: #fff; border:1px solid #d81c29;}

/*products-detail*/
.products-detail-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; position: relative; }
.products-detail-top > div { width: 50%; }
.products-detail-top > div:nth-of-type(1) { position: sticky; top: 110px; }
.products-detail-top > div:nth-of-type(2) { padding-left: 3.5%;}

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

    .swiper-slide img {
      display: inline-block;
      max-width: 600px; 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 10px;
    }

    .mySwiper2 {
      height: 80%;
      width: 100%; 
    }

    .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: 26px !important; height: 26px !important; border-radius: 100%; background: #333333; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%); border: 0px solid #362e2b;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 6px; height: 6px ; border-width: 1px 1px 0 0; border-color: #fff; border-style: solid;}
.swiper-prev:after { transform: rotate(-135deg); margin-left: 2px;}
.swiper-next:after { transform: rotate(45deg); margin-right: 2px;}
.swiper-prev { left: 0px;}
.swiper-next { right: 0px;}

.products-detail-title-2 { position: relative; padding-bottom: 20px; margin-bottom:16px; line-height: 1.4;font-size: clamp(20px, 1.7vw, 22px);}
.products-detail-title-2:after { position: absolute; content: ""; width: 150px; height: 6px; bottom: 0; left: 0; background: #d81c29;}

.pro-btn-box { border-top: 1px solid #b5b5b5; padding: 28px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap;}
.pro-btn-box-shop { border-top: 0px solid #b5b5b5; padding: 0 0 0 0; }
.pro-btn-box > a { width: 170px; line-height: 60px;  color: #fff !important; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; padding: 0 10px; font-size: 16px; margin: 0 10px 10px 0;}
.pro-btn-box > a > img { width: 24px; filter: brightness(100); margin-right: 10px;}
.pro-btn-box > a:hover { transform: scale(0.9);}
.pro-btn-box > button { width: 170px; line-height: 60px; border: 0; color: #fff !important; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; padding: 0 10px; font-size: 16px; margin: 0 10px 10px 0; }
.pro-btn-box > button > img { width: 24px; filter: brightness(100); margin-right: 10px; }
.pro-btn-box > button:hover { transform: scale(0.9); }

.list-type-1 { padding-bottom: calc(10px + 1%);}
.list-type-1 > div { position:relative; padding: 5px 0 5px 20px; line-height: 1.3;}
.list-type-1 > div:before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 100%; box-shadow:inset 0px 0px 0px 3px #d81c29; left: 0; top:10px;}

.title-type-2 { display: block; position: relative;  margin-bottom: 20px; padding: 6px 0 10px 30px; font-weight: 700;font-size: clamp(22px, 2.5vw, 30px); line-height: 1.1;}
.title-type-2:before { content: ""; position: absolute; width: 5px; height: 100%; top: 0; left: 0; background: #d81c29;}

.width-31 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 25px;}
.width-31 > div { width: 31%; padding-bottom: 15px;}

.pro-btn-box-2 { border-top: 1px solid #555555; padding: 28px 0 calc(20px + 3%) 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.pro-btn-box-2 > div:nth-of-type(1) { display: flex; flex-direction: row; flex-wrap: nowrap;}
.pro-btn-box-2 > div > a { margin-bottom: 8px; width: 170px; height: 60px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; color: #fff !important; background: #111; font-size: 16px;}
.pro-btn-box-2 > div:nth-of-type(1) > a:nth-of-type(1) { margin-right: 8px;}
.pro-btn-box-2 > div > a:hover { background: #d81c29;}
.pro-btn-box-2 > div > a > img, .pro-btn-box-2 > div > a > div { margin: 0 5px;}
.pro-btn-box-2 > div > a > img { width: 14px; filter: invert(1);}

/*shop*/
.shop-cash { color: #d81c29;font-size: clamp(18px, 1.5vw, 20px); font-weight: 700; line-height: 1; padding-bottom: 18px; padding-top: 10px;}

/*shop-detail*/
.shop-select-section { border-bottom: 1px solid #b5b5b5; margin-bottom: 25px; padding-bottom: 10px; display: flex; flex-direction: row; flex-wrap: wrap;}
.shop-select-section > div { padding-bottom: 15px;}
.shop-select-section > div:nth-child(odd) { width: 130px; color: #666666;}
.shop-select-section > div:nth-child(even) { width: calc(100% - 130px);}
.money-type { display: inline-block;}

.p-select-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.p-select-list > div { cursor: pointer; margin: 0 5px 5px 0; line-height: 35px; border: 1px solid #666666; padding: 0 8px;}
.p-select-list > div:hover, .p-select-list > div.current { color: #d81c29; border-color: #d81c29;}
.p-select-list > button { cursor: pointer; margin: 0 5px 5px 0; line-height: 35px; border: 1px solid #666666; padding: 0 8px; }
.p-select-list > button:not(:disabled):hover, .p-select-list > button.active { color: #d81c29; border-color: #d81c29; }

#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 #666; display: flex; flex-direction: row; height: 40px;}
#cms-amount-panel button { width:25px; font-size: 13px; color: #111; background-color: #fff !important; border: 0;}
#cms-amount-panel button:first-child { border-right: 1px solid #666;}
#cms-amount-panel button:last-child { border-left: 1px solid #666;}
#cms-amount-panel input[type="text"] { width:54px; font-size: 13px; text-align:center; border: 0;}

.social-tool { padding-bottom: 25px;}

.shop-spec { width: 100%; border-spacing: 0; border-collapse: inherit; border-top: 1px solid #adadad;}
.shop-spec th, .shop-spec td { font-size: 16px; line-height: 1.4; border-bottom: 1px solid #adadad; text-align: left; color: #111; padding: 8px 10px; font-weight: 400;}
.shop-spec th { font-weight: 700; background: #ebebeb;}

.loop2 {  padding-bottom: calc(20px + 4%); margin-bottom: 20px; }
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute;  z-index: 11; top:30%; left: 0; width: 100%;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100;  width: 44px !important; height: 44px !important; border-radius: 100% !important; background: #fff !important; border: 0px solid #fff !important;}
.loop2 .owl-prev { left:0px; }
.loop2 .owl-next { right:0px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { content: ""; position: absolute; width: 15px; height: 15px; background-size: contain; background-repeat: no-repeat; top:50%; left: 50%; transform: translate(-50%, -50%);transition: all 0.4s ease-out 0s;}
.loop2 .owl-prev:before { background-image:url("../images/left-arrow.png"); }
.loop2 .owl-next:before { background-image:url("../images/right-arrow.png");}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { }
.loop2 .owl-stage-outer {z-index: 2; width: calc(100% - 1px);}
.loop2 .owl-dots { position: absolute; z-index: 100; padding: 0 0px;bottom:10px; left:0; width: 100%; text-align: center!important;  }
.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: #c0c7cb !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: #d81c29 !important; }

/*news*/
.news-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: calc(20px + 2%);}
.news-list > div { width: calc(50% - 15px); background: #f2f2f2; margin-bottom: calc(20px + 2%);}

.idx-news-pto { padding-bottom: 50%; display: block; margin-bottom: 20px;}
.idx-news-pto:hover img { transform: scale(1.1); filter: grayscale(100%);}
.idx-news-pto img { transition: filter 0.4s ease-out 0s, transform 2s ease-out 0s; }
.idx-news-content { padding: 0 25px 20px 25px; }
.idx-news-tag { display: inline-block; margin-bottom: 15px; color: #fff; background: #d81c29; line-height: 26px; border-radius: 13px; padding: 0 12px; font-size: 14px; min-width: 82px; text-align: center;}
.idx-news-title { display: block; font-weight: 700; line-height: 1.3; margin-bottom: 8px;font-size: clamp(18px, 1.5vw, 20px);}
.idx-news-title:hover { color: #d81c29;}
.idx-news-date { line-height: 1; color: #666666; font-size: 14px; padding-bottom: 10px;}
.idx-news-data { line-height: 1.3; font-size: 17px; margin-bottom: 15px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}

/*contact*/
.contact-info-section { background: linear-gradient(0deg, #111 0%, #5e5e5e 100%); border-radius: 15px; padding: 30px 0 35px 0; margin-bottom: 25px;display: flex; flex-direction: row; flex-wrap: wrap; }
.contact-info-section > div { position: relative; width: 25%; padding: 0 15px;}
.contact-info-section > div:after { position: absolute; content: ""; width: 1px; height: 100%; 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(20px, 1.8vw, 25px); font-weight: 700; color: #fff;}
.contact-info-top > img { height: 28px; display: inline-block; margin-right: 10px; filter: invert(1) brightness(100%);}
.contact-info-data { line-height: 1.5; color: #fff;}

.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-left: 22px;}
.contact-form-list > div:nth-of-type(1) span { color: #d81c29; position: absolute; top:4px; left: 0;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 125px); padding-left: 0px;}

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


.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:#111; 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: calc(100% - 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:#111; font-family: "Roboto", sans-serif;  padding:0px 35px 0px 15px;  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: 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: #111; margin-bottom: 0; font-weight: 400;}
.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: #d81c29;}
.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: #d81c29; border-radius: 100%;}

.contact-100 { width: 100% !important;}

.contact-btn { border-width: 0; width: 170px; line-height: 60px; display: block; margin: 10px auto 25px auto; color: #fff; background: #111;transition: all 0.4s ease-out 0s; }
.contact-btn:hover { background: #d81c29;}

.title-type-3 {font-weight: 700; font-size: clamp(25px, 3.3vw, 42px); line-height: 1.2; padding: 0 0 22px 0; margin: 0 0 30px 0; position: relative;}
.title-type-3:after { content: ""; position: absolute; width: 50px; height: 6px; bottom: 0; left: 0; background: #d81c29;}

.partners-section-1-data > div { margin-bottom: 20px;}
.partners-section-1-data > div:before { top:50%; transform: translateY(-50%);}

.partners-info { padding: 12px 0 12px 20px; position: relative;}
.partners-info span { font-weight: 700;;}
.partners-info:before { content: ""; position: absolute; left: 0; top:0; width: 3px; height: 100%; background: #d81c29;}
.partners-info a { word-break: break-all;}
.partners-info a:hover { color: #d81c29;}

@media only screen and (max-width: 1200px) {
    #content { padding-top: 60px; }

	.aside-title { display: none;}
	.main-layout > div:nth-of-type(1) { width: 100%; padding-bottom: 25px; position: inherit; top: auto;}
	.main-layout > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
	
	.aside-pto { display:none;}
}

@media only screen and (max-width: 980px) {
	.banner-pc { display: none !important;}
	.banner-mobile { display: block !important;}
	
	.title01{ margin-bottom: 20px;}
	
	.products-list-2 > div { padding: 0 10px 30px 10px;}
	
	.products-detail-top > div { width: 100%; }
	.products-detail-top > div:nth-of-type(1) {  position: relative; top: auto; padding: 0 0 25px 0;}
	.products-detail-top > div:nth-of-type(2) {  padding: 0;}
	
	.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-left: 125px;}
}
@media only screen and (max-width: 768px) {
	.btn-type-1 { transform: scale(0.7);}
	
	.btn-type-2 { padding: 0 14px; line-height: 28px; border-radius: 14px; font-size: 15px;}

	.technology-section-1 > div:nth-of-type(1) { width: 100%; padding-right: 0%;padding-bottom: 40px;}
	.technology-section-1 > div:nth-of-type(2) { }
	
	.width-50-layout > div { width: 100%; }
	
	.idx-pro-btn {  line-height: 28px; border-radius: 14px; font-size: 15px;}
	
	.pro-btn-box-2 > div { width: 100%;}
	.pro-btn-box-2 > div > a { width: 100%;}
	
	.news-list > div { width: 100%;}
	
	.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) {	
	.technology-title-box > div:nth-of-type(1) { width: calc(100% - 0px); padding-right: 0px; padding-bottom: 15px; line-height: 1.3; }
	.technology-title-box > div:nth-of-type(2) { width: 100px; margin-left: 20px; }
	.technology-title:before { top:6px;}
	
	.products-list-section > div:nth-of-type(1) { width: 100%;}
	.products-list-section > div:nth-of-type(2) { width: 100%; padding: 20px 0 0 0px;}
	.products-list-pto { clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);}
}
@media only screen and (max-width: 570px) {
	.products-list-2 > div { width: 100%; padding: 0 0px 25px 0px;}
	
	.pro-btn-box > a { width: 100%; margin-right: 0;}
	
	.width-31 > div { width: 100%;}
}

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

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