/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: "Roboto", serif; overflow-x: hidden; }
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:1280px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 18px; line-height:1.5; color: #222; letter-spacing: 0.05rem; font-weight: 400; padding-top: 110px;}
#content p{ margin-bottom: 30px; margin-top: 0; font-size: 18px;line-height:1.5;  font-weight: 400;}
p, td, li, label { font-size: 18px;line-height:1.5;  font-weight: 400;}

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

header { background: #fff;}
header:before, header:after {content: ""; background: #bfbfbf; position: absolute; bottom: 0; left: 0; height: 8px; width: 100%;}
header:before { background: #27597e; width: 34%; bottom: auto; top:calc(100% - 8px); z-index: 1;}
.logo img:first-child { opacity: 0;}
.logo img:last-child { opacity: 1;}
.top-right-link > div img {  filter: invert(0%) brightness(0%);}
.menuzord-menu>li>a { padding-bottom: 27px; color: #222; }
.menuzord .showhide em { background: #222 !important; }


.banner {  height: 326px; overflow: hidden; position: relative;}
.banner-pc { }
.banner-mobile { display: none;}
.banner img  { object-fit: cover; width: 100%; height: 100%; position: absolute;}
.banner-title { padding: 0 5%; position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.banner-title h1 { width: 100%; margin:0 auto; display: block; text-transform: uppercase; color: #fff; font-size: 50px; font-weight: 700; line-height:110%; padding: 0; text-align: left; letter-spacing: 0.05rem; }

.path-section { display: flex; flex-direction: row; flex-wrap: nowrap; }
.path-section > div:nth-of-type(1) { width: 30%; position: relative; text-align: right; padding: 15px 47px 15px 0; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 0.05rem;}
.path-section > div:nth-of-type(1):after { content: ""; position: absolute; left: 0;top: 0; width: 100%; height: 100%; z-index: -1;background: #211c19; clip-path: polygon(0% 0, 100% 0%, calc(100% - 30px) 100%, 0 100%);}
.path-section > div:nth-of-type(2) { width: 70%; padding: 15px 5% 15px 22px;}

#path { text-align: left; }
#path ul { margin: 8px 0 0 0; padding: 0; letter-spacing: 0.05rem;}
#path li { display: inline-block; vertical-align: top; font-size: 17px; line-height: 30px; line-height: 1.2; color: #27597e;}
#path li:after { content:">"; display: inline-block; vertical-align: top; padding: 0 0 0 4px; color: #333;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #333; }
#path li a:hover, #path li:last-child a { color: #27597e;}

.main-bg { position: relative; padding-top: calc(25px + 2.5%); overflow: hidden;}
.main-bg:after { position: absolute; content: ""; z-index: -2; top: 0 ; left: 0; width: 100%; height: 3080px; background: #f8f8f8; clip-path: polygon(0% 0, 40px 0%, 100% calc(100% - 450px), 100% 100%, 0% calc(100% - 530px));}


.title01 { position: relative; margin-bottom: calc(10px + 1%);}
.title01 div, .title01 h1 { font-size: clamp(23px, 2.1vw, 34px); display: block; padding: 0; margin: 0; line-height: 1.2; font-weight: 700; color: #27597e;}
.title01:before { position: absolute; content: ""; background: url("../images/logo-icon.png") no-repeat; background-size: contain; width: 35px; height: 35px; left: -50px; top: 2px;}

/*application*/
.application-list { /*display: flex; flex-direction: column; flex-wrap: nowrap;*/ padding-bottom: calc(20px + 2%);}
.application-list > div { display: flex; flex-direction: row; flex-wrap: wrap; /*align-items: center;*/margin-bottom: calc(20px + 5.47%); background: rgba(255, 255, 255, 0.77); box-shadow: 0 0 44px rgba(51, 51, 51, 0.14);}
/*.application-list > div > div { width: 50%; }
.application-list > div > div:nth-of-type(1) { padding-right:calc(20px + 3%);}
.application-title { margin-bottom: 15px;clip-path: polygon(0% 0, 100% 0%, calc(100% - 38px) 100%, 0% 100%); font-weight: 700; font-size:clamp(20px, 1.5vw, 28px); background: #008fd7; color: #fff; padding: 12px 45px 12px 20px; line-height: 1.1; }
.application-data { margin-bottom: 20px;}
.application-pto { box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1) !important;}

.application-list > div:nth-child(even) > div:nth-of-type(1) { order: 2; padding-left:calc(20px + 3%); padding-right:0;}
.application-list > div:nth-child(even) > div:nth-of-type(2) { order: 1;}*/

.application-list > div > div:nth-child(1) {width: 46.016%; padding-bottom: 29.923%; position: relative; z-index: 1; overflow: hidden;}
.application-list > div > div:nth-child(1) > a {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;}
.application-list > div > div:nth-child(1) > a > img {position: absolute; top: 50%; left: 50%; display: block; width: 100%!important; height: 100%!important; object-fit:cover; opacity: 1; transform:translate(-50%,-50%) scale(1.0, 1.0); transition: all 0.5s ease 0s;}
.application-list > div > div:nth-child(1) > a:hover > img {transform:translate(-50%,-50%) scale(1.2, 1.2);}
.application-list > div > div:nth-child(2) {width: calc(100% - 46.016%); position: relative; z-index: 1; display: flex; flex-flow: column; justify-content: center; padding: 20px 50px;}
.application-list > div > div:nth-child(2)::before {content: ''; width: 11px; background: #27597e; position: absolute; top: 0; left: 0; bottom: 0; z-index: -1;}
.application-title {font-size: 28px; color: #555555; font-weight: 500; letter-spacing: 0; margin-bottom: 40px;}
.application-title span {position: relative; z-index: 1;}
.application-title span::before {content: ''; height: 1px; background: #27597e; position: absolute; left: 0; right: 0; top: calc(100% + 15px); z-index: -1;}
.application-data {color: #555555; letter-spacing: 0; line-height: 1.535; margin-bottom: 20px;}
.application-data p {margin: 0!important;}
.application-list > div:nth-child(2n+2) > div:nth-child(1) {order: 2;}
.application-list > div:nth-child(2n+2) > div:nth-child(2) {order: 1;}
.application-list > div:nth-child(2n+2) > div:nth-child(2)::before {left: auto; right: 0;}

.btn01 { display: block; font-size: 15px; width: 160px; line-height: 50px; border: 1px solid #000; color: #000; text-align: center; padding: 0 10px; background: transparent;transition: all 0.4s ease-out 0s;}
.btn01:hover { background: #000; color: #fff; transform: scale(0.9);}

.btn02 { display: flex; flex-flow: wrap; justify-content: center; align-items: center; font-size: 15px; width: 173px; min-height: 52px; letter-spacing: 0; color: #fff; text-align: center; padding: 0 42px 0 10px; background: #27597e; clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%); margin: 0 0 0 auto; transition: all 0.4s ease-out 0s;}
.btn02:hover { background: #000; color: #fff;}

/*products*/
.products-list-section { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 4%);}
.products-list-section > div:nth-of-type(1) { width: 280px;}
.products-list-section > div:nth-of-type(2) { width: calc(100% - 280px); padding-left: calc(20px + 2%);}

.filter-title { background: #222222; padding: 10px 20px; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filter-title > div { font-size: 19px; color: #fff; font-weight: 700; line-height:1; }
.filter-title > img { width: 29px; filter: invert(100%) brightness(100%);}

.p-list { display:flex; flex-direction: row; flex-wrap: wrap;}
.p-list > a { width: 50%; padding: 0 14px 28px 14px; display: block;}
.p-list > a:hover .p-list-pto:after { box-shadow:inset 0px 0px 0px 7px #f28d19;}
.p-list > a:hover .p-list-btn { transform: translate(-50%, -50%) scale(1); opacity: 1;}
.p-list > a:hover .p-list-name { color: #f28d19;}
.p-list-pto { border-radius: 0 50px; padding-bottom: 66%; margin-bottom: 14px; position: relative;transition: all 0.4s ease-out 0s; box-shadow:inset 0px 0px 0px 7px #f28d19;}
.p-list-pto:after { content: ""; position: absolute; width: 100%; height: 100%;box-shadow:inset 0px 0px 0px 0px #f28d19; z-index: 2;border-radius: 0 50px;transition: all 0.15s ease-out 0s;}
.p-list-btn { width: 60px; height: 60px; border-radius: 100%; position: absolute; z-index: 3; top:50%; left: 50%; transform: translate(-50%, -50%) scale(0);  background: #9acd61; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items:center; transition: all 0.3s ease-out 0s;  opacity: 0; color: #fff;}
.p-list-name { font-size: clamp(18px, 1vw, 22px); font-weight: 700; transition: all 0.4s ease-out 0s; padding-bottom: 10px; }
.p-list-data { }



/*products-list*/
.title02 { font-size: clamp(20px, 1.8vw, 30px); font-weight: 700; color: #000; padding-bottom: 15px;}

.foam-content { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: calc(20px + 3%);}
.foam-content > div { width: calc(33.33% - 5px); text-align: center;}
.foam-pto { margin-bottom: 12px;}
.foam-name { font-size: clamp(18px, 1vw, 22px); font-weight: 700;}

.title03 { position: relative; margin-bottom: calc(10px + 1%);}
.title03:after { position: absolute; content: ""; height: 2px; width: 100%; left: 0; top: 50%; transform: translateY(-50%);background: #27597e;}
.title03 > span { position: relative; z-index: 3; border-radius: 0 20px; display:inline-block; padding:10px 18px; background: #27597e; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.1;}

.data-type-1 { padding-bottom: calc(10px + 1.5%);}
.data-type-1 > div { position: relative; padding-left: 22px; margin-bottom: 4px;}
.data-type-1 > div:before { position: absolute; content: ""; width: 12px; height: 2px; background: #27597e; left: 0; top:12px;}

.products-list-section-2 > div:nth-of-type(1) { padding-top: 63px;}

.p-tool-bar { display:flex; flex-direction: row; flex-wrap: wrap; padding-bottom: 10px;}
.p-tool-bar > a { margin: 0 10px 10px 0; cursor: pointer; border-radius: 15px 0; border: 1px solid #333333; display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 7px 18px; background: transparent; transition: all 0.4s ease-out 0s; }
.p-tool-bar > a:hover { background: #27597e; border-color: #27597e;}
.p-tool-bar > a:hover > img { filter: invert(100%) brightness(100%);}
.p-tool-bar > a:hover > div { color: #fff;}
.p-tool-bar > a > img { height: 22px;transition: all 0.4s ease-out 0s; }
.p-tool-bar > a > div { font-weight: 700; padding:0 8px;transition: all 0.4s ease-out 0s; }

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

.p-link {display:flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.p-link:hover { opacity: 0.6;}
.p-link > img {display: inline-block; margin-right: 10px;}
.p-link > span { font-size:clamp(16px, 0.8vw, 18px); font-weight: 700;}

.contact-note2 {  margin-top: 5px; display: inline-block;position: relative;padding-left: 25px; 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: #222; margin-bottom: 7px; font-size: 15px; font-weight: 400;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: -8px;left: 11px !important;height: 18px;width: 18px;background-color: transparent; border: 2px solid #d0d0d0; border-radius: 0%;}
.contact-note2:hover input ~ .checkmark {background-color: transparent;}
.contact-note2 input:checked ~ .checkmark {border-color: #5c5d59; background: #5c5d59;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 2px;top: 2px;width: 11px;height: 6px; border-width: 0 0 2px 2px; border-style: solid; border-color: #fff; transform: rotate(-45deg); }

.filter-list { padding: 5px 0;}

.contact-note3 { display: block; position: relative; padding-left: 35px; padding-right: 30px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; color: #222; margin-bottom: 10px; font-size: 15px; font-weight: 400;}
.contact-note3 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 0px;left: 11px !important;height: 18px;width: 18px;background-color: transparent; border: 2px solid #d0d0d0; border-radius: 0%;}
.contact-note3:hover input ~ .checkmark {background-color: transparent;}
.contact-note3 input:checked ~ .checkmark {border-color: #7eaf46; background: #7eaf46;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note3 input:checked ~ .checkmark:after {display: block;}
.contact-note3 .checkmark:after {left: 2px;top: 2px;width: 11px;height: 6px; border-width: 0 0 2px 2px; border-style: solid; border-color: #fff; transform: rotate(-45deg); }

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

/*.spec-table { }
.spec-table th:first-child, .spec-table td:first-child{ position: sticky; left: 0;}
.spec-table th:nth-of-type(2), .spec-table td:nth-of-type(2) { position: sticky; left: 64px;}
.spec-table th:first-child, .spec-table th:nth-of-type(2) {  background: #222;}
.spec-table td:first-child, .spec-table td:nth-of-type(2) {  background: #fff;}
*/
/*products-detail*/
.p-detail-section-1 { padding-bottom: calc(20px + 2.5%); display: flex; flex-direction: row; flex-wrap: wrap;}
.p-detail-section-1 > div { width: 50%;}
.p-detail-section-1 > div:nth-of-type(2) { }
.p-detail-section-1 > div:nth-of-type(2) .p-tool-bar { justify-content: flex-end;}
.p-detail-section-1 > div:nth-of-type(2) .p-tool-bar > a > div { font-size: 16px; }

.p-detail-section-2 { padding-bottom: calc(20px + 2.5%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.p-detail-section-2 > div:nth-of-type(1) { width: 35%;}
.p-detail-section-2 > div:nth-of-type(2) { width: 60%;}

.p-detail-spec { width: 100%; border-collapse: inherit; border-spacing: 0;}
.p-detail-spec th, .p-detail-spec td { text-align: left; border-bottom: 1px solid #c6c6c6; padding: 5px;}
.p-detail-spec th { font-size: clamp(17px, 0.8vw, 19px); font-weight: 700;}
.p-detail-spec td { font-size: clamp(16px, 0.8vw, 18px); }

.p-detail-spec-2 { background: transparent;}
.p-detail-spec-2 th, .p-detail-spec-2 td { padding: 11px calc(10px + 2%);}
.p-detail-spec-2 th, .p-detail-spec-2 td b { font-size: clamp(17px, 0.8vw, 19px);}
.bg-white { background: #fff;}

.btn-back { padding-bottom: calc(20px + 3%);}
.btn-back .p-tool-bar { justify-content: center;}
.btn-back .p-tool-bar > a { margin-right: 0;}
.btn-back .p-tool-bar > a > div { font-size: 16px;}

/*about*/
.about-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: 25px 0 calc(20px + 5%);}
.about-section > div:nth-of-type(1) { width: calc(50% - 62px); padding: 0 5%; text-align: center; }
.about-section > div:nth-of-type(2) { width: calc(50% + 62px); }

.about-title-1 { font-size: clamp(18px, 1.2vw, 24px); font-weight: 700; padding-bottom: 4px;}
.about-title-2 { font-size: clamp(23px, 2vw, 32px); font-weight: 700; color: #008fd7; line-height: 1.3;}

.about_new {padding-bottom: calc(30px + 3.516%);}
.aboA {display: flex; flex-flow: wrap; align-items: flex-start; margin-bottom: calc(20px + 7.032%);}
.aboA > .txt {width: calc(100% - 54.766%); color: #555555; padding: 0 calc(20px + 1.563%) 0 0; line-height: 1.9444444444!important; letter-spacing: 0.4px;}
.aboA > .txt p {margin-bottom: 0!important; line-height: 1.9444444444!important;}
.aboA > .img {width: 54.766%; line-height: 0; font-size: 0; position: relative; z-index: 1;}
.aboA > .img::before {content: ''; width: 11px; background: #27597e; position: absolute; top: 0; bottom: 0; right: 100%; z-index: -1;}
.aboB {}
.aboB > .lis {display: flex; flex-flow: wrap; align-items: center; margin-bottom: calc(20px + 1.563%);}
.aboB > .lis > .img {width: 172px; line-height: 0; font-size: 0;}
.aboB > .lis > .txt {width: calc(100% - 172px); padding: 0 0 0 29px; color: #555555;}
.aboB > .lis > .txt > .tit {font-size: 22px; color: #555555; font-weight: 500; line-height: 1.364!important; letter-spacing: 0; padding: 0; margin: 0 0 calc(10px + 0.927%) 0;}
.aboB > .lis > .txt p {font-size: 15px!important; margin-bottom: 0!important; line-height: 24px!important; letter-spacing: 0;}

/*contact*/
.contact-location { padding:calc(20px + 1%) 5% 0 5%; text-align: center;}

.contact-info { max-width: 870px; margin: 0 auto calc(20px + 2%) auto;display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-info > div:nth-of-type(1) { width: 180px; color: #27597e; font-size:clamp(24px, 3.8vw, 40px); line-height: 1.1; font-weight: 700; text-transform: uppercase;}
.contact-info > div:nth-of-type(2) { width: calc(100% - 180px); padding-left: calc(15px + 1%);}

.contact-info-title { font-size:clamp(18px, 0.9vw, 22px); font-weight: 700; padding-bottom: 12px; }
.contact-info-data { padding-bottom: calc(15px + 2%);display: flex; flex-direction: row; flex-wrap: wrap;}
.contact-info-data > div { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 0 calc(10px + 3%) 7px 0;}
.contact-info-data > div > img { width: 20px; filter: brightness(0);}
.contact-info-data > div > div { padding-left: 10px; font-size:clamp(16px, 0.8vw, 20px);}


.contact-form { border-top: 1px solid #d4d4d4; padding-bottom: calc(20px + 5%);}
.contact-form-list { padding: calc(10px + 1%) 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid #d4d4d4;}
.contact-form-list > div:nth-of-type(1) { width: 192px; padding-top: 3px;}
.contact-form-list > div:nth-of-type(2) { width: calc(100% - 192px);}
.contact-form-list > .gender { display: flex; flex-flow: wrap;}
.contact-form-list > .gender .gender_in { width: 70px; display: flex; flex-flow: column;}
.contact-form-list > .gender input { width: calc(100% - 70px) !important; padding: 0 0 0 3% !important;}

.contact-title { font-size: clamp(18px, 0.8vw, 20px); font-weight: 700; position: relative; padding-left: 20px;}
.contact-title span { color: #d71919; position: absolute; left: 0; top:50%; transform: translateY(-50%);}

.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(18px, 0.8vw, 20px); border-width:0 0 0px 0; border-style: solid; border-color: #d6d6d6; margin: 0px 0 0px 0; width: 100%; padding:0 ; color:#222; background: transparent; font-family: 'Roboto', sans-serif; line-height: 35px; border-radius: 0px; letter-spacing: 0.05rem; }
.contact-form textarea { height:180px; resize:none; line-height: 140%; padding-top: 6px;}
.contact-form select{ margin: 0 0 0px 0;  width:100%;  background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 15px) 14px; background-size: 18px 11px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   background-color: transparent; font-size: clamp(18px, 0.8vw, 20px); border-width:0 0 0px 0; border-style: solid; border-color: #999999; color:#222; font-family: 'Roboto', sans-serif;  padding:0px 35px 0px 0;  line-height: 35px; border-radius: 0px;letter-spacing: 0.05rem;}
.contact-form option { padding:1px 5px;}
.contact-form select::-ms-expand { display: none;}

.contact-btn { padding-top: calc(20px + 1%);}
.contact-btn .btn01 { margin: 0 auto;}

/*check css*/
.opt {margin: 0 0 10px 0;}
.opt:last-child {margin: 0 0 0px 0;}
@keyframes hover-color {
  from {
    border-color: #c0c0c0; }
  to {
    border-color: #3e97eb; }
}

.magic-radio, .magic-checkbox { position: absolute; display: none;}
.magic-radio[disabled], .magic-checkbox[disabled] { cursor: not-allowed; }
.magic-radio + label, .magic-checkbox + label { position: relative; display: inline-flex; padding: 0 8px 0 25px; cursor: pointer; color: #333333; vertical-align: middle;}
.opt:last-child label, .opt:last-child label {font-family:Microsoft JhengHei;}
.magic-radio + label:hover:before, .magic-checkbox + label:hover:before { animation-duration: 0.4s; animation-fill-mode: both; animation-name: hover-color;}
.magic-radio + label:before, .magic-checkbox + label:before { position: absolute; top: 50%; margin-top: -9px; left: 0; display: inline-block; width: 18px; height: 18px; content: ''; border: 1px solid #c6c6c6;}
.magic-radio + label:after, .magic-checkbox + label:after { position: absolute; display: none; content: ''; }
.magic-radio[disabled] + label, .magic-checkbox[disabled] + label { cursor: not-allowed; color: #e4e4e4;}
.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, .magic-checkbox[disabled] + label:hover, .magic-checkbox[disabled] + label:before, .magic-checkbox[disabled] + label:after { cursor: not-allowed;}  .magic-radio[disabled] + label:hover:before, .magic-checkbox[disabled] + label:hover:before { border: 1px solid #e4e4e4; animation-name: none;}
.magic-radio[disabled] + label:before, .magic-checkbox[disabled] + label:before { border-color: #e4e4e4;}
.magic-radio:checked + label:before, .magic-checkbox:checked + label:before { animation-name: none;}
.magic-radio:checked + label:after, .magic-checkbox:checked + label:after { display: block;}
.magic-radio + label:before { border-radius: 50%;}
.magic-radio + label:after { top: 50%; left: 5px; margin: -4px 0 0 0; width: 8px; height: 8px; border-radius: 50%; background: #27597e;}
.magic-radio:checked + label:before { border: 1px solid #27597e; background: #fff;}
.magic-radio:checked[disabled] + label:before { border: 1px solid #27597e;}
.magic-radio:checked[disabled] + label:after { background: #27597e;}
.magic-checkbox + label:before { border-radius: 3px;}
.magic-checkbox + label:after { top: 2px; left: 7px; box-sizing: border-box; width: 6px; height: 12px; transform: rotate(45deg); border-width: 2px;
border-style: solid; border-color: #fff; border-top: 0; border-left: 0;}
.magic-checkbox:checked + label:before { border: #3e97eb; background: #3e97eb;}
.magic-checkbox:checked[disabled] + label:before { border: #c9e2f9; background: #c9e2f9;}
.magic-radioL {width: 40%;}
.magic-radioR {width: 60%;}
  


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

	.title01:before { transform:scale(0.5); top: -28px; left: -8px;}
	
}
@media only screen and (max-width: 1279px) {
	#content { padding-top: 64px;}
	
	.banner { height: 150px;}
	.banner-pc { display: none}
	.banner-mobile { display: block;}
	
	.p-detail-section-1 > div { width: 100%;}
	.p-detail-section-1 > div:nth-of-type(2) .p-tool-bar { justify-content: flex-start;}
	
	.p-detail-section-2 > div:nth-of-type(1) { width: 100%; order: 2;}
	.p-detail-section-2 > div:nth-of-type(2) { width: 100%; order: 1; text-align: center; padding-bottom: 25px;}
}

@media only screen and (max-width: 980px) {
	.path-section > div:nth-of-type(1) { width: 30px;}
	.path-section > div:nth-of-type(1) > div { display: none;}
	.path-section > div:nth-of-type(2) { width: calc(100% - 30px); padding: 10px 5% 10px 0px;}
	#path li { font-size: 15px;}
	
	/*.application-list > div > div { width: 100%; }
	.application-list > div > div:nth-of-type(1) { padding-right:0; order: 2;}
	.application-list > div > div:nth-of-type(2) { order: 1;}*/
    .application-list > div > div:nth-child(1), .application-list > div:nth-child(2n+2) > div:nth-child(1) {order: 1; width: 100%; padding-bottom: 64.966%;}
    .application-list > div > div:nth-child(2), .application-list > div:nth-child(2n+2) > div:nth-child(2) {order: 2; width: 100%; padding: 30px 20px 20px 20px;}
    .application-list > div > div:nth-child(2)::before, .application-list > div:nth-child(2n+2) > div:nth-child(2)::before {left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 11px;}
    .application-title {margin-bottom: 30px;}
	.application-pto { margin-bottom: 20px;}
	.application-list > div:nth-child(even) > div:nth-of-type(1) { padding-left:0;}
	
	.products-list-section > div:nth-of-type(1) { width: 100%; padding-bottom: 25px;}
	.products-list-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left:0 ;}
	.filter-title { display: none;}
	.p-list-pto { border-radius: 0 25px; }
	.p-list-pto:after { border-radius: 0 25px;}
	
	.products-list-section-2 > div:nth-of-type(1) { padding-top: 0;}
	
	.about-section > div:nth-of-type(1) { width: 100%; padding: 0; }
	.about-section > div:nth-of-type(1) img { max-width: 350px; width: 100%; }
	.about-section > div:nth-of-type(2) { width: 100%; }
    .aboA > .txt {width: 100%; padding: 0 0 calc(20px + 2.268%) 0;}
    .aboA > .img {width: 100%;}
    .aboA > .img::before {top: auto; right: auto; bottom: 100%; width: 100%; height: 11px;}
    .aboA > .img img {width: 100%;}
	
	.contact-form-list > div:nth-of-type(1) { width: 100%; padding-top: 0px; padding-bottom: 4px;}
	.contact-form-list > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 20px;}
    .contact-form-list > .gender .gender_in { flex-flow: row; width: 100%;}
    .contact-form-list > .gender input { width: 100% !important; padding: 0 !important;}
	
	.contact-info > div:nth-of-type(1) { width: 100%; padding-bottom: 15px;}
	.contact-info > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0;}
}
@media only screen and (max-width: 768px) {
	.aboB > .lis {align-items: flex-start;}
    .aboB > .lis > .img {width: 150px;}
    .aboB > .lis > .txt {width: calc(100% - 150px); padding: 0 0 0 20px;}
}
@media only screen and (max-width: 640px) {
	/*.p-link {flex-direction: column; align-items: flex-start; }
	.p-link > img { margin-right: 0px;}
	.p-link > span { font-size:clamp(16px, 0.8vw, 18px); font-weight: 700;}*/
	
}
@media only screen and (max-width: 570px) {
	.foam-content > div { width: 100%; margin-bottom: 20px;}
	
	.p-tool-bar > a { margin: 0 0 10px 0; width: 100%; justify-content: center; }
    
    .aboB > .lis > .img {width: 172px; margin: auto;}
    .aboB > .lis > .txt {width: 100%; padding: 20px 0 0 0;}
}

@media only screen and (max-width: 414px) {
	.p-list > a { width: 100%; padding: 0 0 28px 0; }
	
}

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