@charset "utf-8";
/* Products Detail */
.group{padding-bottom: 3rem;}
.box{margin-bottom: 7rem;}
.box .tit-28{color: #222; margin-bottom: 2rem;}
.box .tit-24{margin-bottom: 2rem; border-bottom: 2px solid #0c4097; padding-bottom: 1.2rem;}
.notes{font-size: 1.4rem; margin-top: 20px;}
.notes2{font-size: 1.4rem; margin-top: 5px;}
.desc{font-size: 1.8rem; line-height: 2;}

.box-btn{margin-top: 30px;}

.box-01{display: flex; justify-content: space-between; flex-wrap: wrap;}
.box-01 .col{width: 47.2%;}

.rows{margin-bottom: 2rem;}
.rows2:not(:last-of-type){margin-bottom: 3rem;}

.titleS{font-size: 2.4rem; line-height: 1.6; color: #0c4097; font-weight: 500; position: relative; padding-left: 2rem; margin-bottom: 1rem;}
.titleS:before{content: ''; position: absolute; top: 0.5em; bottom: 0.2em; left: 0; width: 0.4rem; border-radius: 0.2rem; background: #0c4097; display: block;}
.titleS2{font-size: 2rem; line-height: 1.6; font-weight: 500; position: relative; padding-left: 1em; margin-bottom: 1rem;}
.titleS2:before{content: ''; background: #ff2600; border-radius: 100%; position: absolute; top: 0.6em; left: 0; display: block; width: 0.4em; height: 0.4em;}

@media (max-width: 1000px){
    .group{padding-bottom: 0;}
    
    .box-01 .col{width: 100%; margin-bottom: 30px;}
    .box-01 .col:last-of-type{margin-bottom: 0;}
    
    .titleS{font-size: 2rem;}    
}


/* Intro */
.intro{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
.intro-desc{font-size: 1.8rem; line-height: 2; width: 72.7%;}
.intro-img{width: 24.3%;}

@media (max-width: 768px){
    .intro-desc{width: 100%;}
    .intro-img{width: 100%; max-width: 340px; margin: 3rem auto 0;}
}


/* Table */
.tb th,
.tb td{padding: 1.5rem;}
.tb th sup{font-size: 0.7em;}

@media (max-width: 1000px){
    .tb-fix{overflow: scroll; position: relative;}
}

.tb-01 th,
.tb-01 td{width: 17.5%;}
.tb-01 th:nth-of-type(1), .tb-01 td:nth-of-type(1){width: 10.5%; /*text-align: center;*/}
.tb-01 th:nth-of-type(4), .tb-01 td:nth-of-type(4){width: 14.5%;}
.tb-01 th:nth-of-type(5), .tb-01 td:nth-of-type(5){width: 22.5%;}

@media (max-width: 1000px){
    .tb-01 th,
    .tb-01 td{width: 160px; min-width: 160px;}
    .tb-01 th:nth-of-type(1), .tb-01 td:nth-of-type(1){width: 100px; min-width: 100px; position: sticky; left: -1px;}
    .tb-01 td:nth-of-type(1){background: #fff;}
    .tb-01 th:nth-of-type(4), .tb-01 td:nth-of-type(4){width: 160px; min-width: 160px;}
    .tb-01 th:nth-of-type(5), .tb-01 td:nth-of-type(5){width: 220px; min-width: 220px;}
}

.tb-02 th,
.tb-02 td{width: 33%; text-align: center;}
.tb-02 th:nth-of-type(1), .tb-02 th:nth-of-type(2),
.tb-02 td:nth-of-type(1), .tb-02 td:nth-of-type(2){width: 17%;}
.tb-02 th{padding: 1.5rem 0;}

@media (max-width: 480px){
    .tb-02 th{padding: 1.5rem 0;}
    .tb-02 td{padding: 1.5rem 1rem;}
}

.tb-03 th{text-align: center;}
.tb-03 td{width: 7%; text-align: center;}
.tb-03 td:nth-of-type(1){width: 20%; text-align: left;}
.tb-03 td:nth-of-type(2), .tb-03 td:nth-of-type(3){width: 9%;}
.tb-03 td:nth-of-type(6), .tb-03 td:nth-of-type(7){width: 17%;}

@media (max-width: 1000px){
    .tb-03 td{width: 70px; min-width: 70px;}
    .tb-03 tr:nth-of-type(1) th:nth-of-type(1),
    .tb-03 td:nth-of-type(1){position: sticky; left: -1px;}
    
    .tb-03 td:nth-of-type(1){width: 180px; min-width: 180px; background: #fff;}
    .tb-03 td:nth-of-type(2), .tb-03 td:nth-of-type(3){width: 100px; min-width: 100px;}
    .tb-03 td:nth-of-type(6), .tb-03 td:nth-of-type(7){width: 120px; min-width: 120px;}
}

.tb-04 th,
.tb-04 td{width: 50%; text-align: center;}
.tb-04 td:nth-of-type(1){text-align: left;}

.tb-05 th{width: 10.5%; text-align: center;}

@media (max-width: 767px){
    .tb-05 th{width: 100px;}
}

.tb-06 th,
.tb-06 td{width: 19.75%; text-align: center;}
.tb-06 th:nth-of-type(1),
.tb-06 th:nth-of-type(2),
.tb-06 td:nth-of-type(1),
.tb-06 td:nth-of-type(2){width: 10.5%;}

@media (max-width: 767px){
    .tb-06 th,
    .tb-06 td{width: 100px !important; min-width: 100px !important;}
    .tb-06 th:nth-of-type(1),
    .tb-06 td:nth-of-type(1){position: sticky; left: -1px;}
    .tb-06 td:nth-of-type(1){background: #fff;}
}

.tb-07 th,
.tb-07 td{width: 15%; font-size: 1.6rem;}

.tb-07 th{text-align: center;}

.tb-07 th:nth-of-type(3),
.tb-07 td:nth-of-type(3){width: 25%;}

.tb-07 td:nth-of-type(1){background: #f2f2f2; text-align: center;}
.tb-07 td:not(:nth-of-type(1)){font-size: 1.4rem; line-height: 1.5;}
.tb-07 tr:nth-of-type(2) td:nth-of-type(3),
.tb-07 tr:nth-of-type(2) td:nth-of-type(4){width: 12.5%;}
.tb-07 tr:nth-of-type(2) td{text-align: center; vertical-align: middle;}
.tb-07 td figure{display: block; width: 80%; margin: 0 auto;}

@media (max-width: 1000px){
    .tb-07 th,
    .tb-07 td{width: 150px; min-width: 150px;}
    
    .tb-07 th:nth-of-type(3),
    .tb-07 td:nth-of-type(3){width: 250px; min-width: 250px;}
    
    .tb-07 tr:nth-of-type(2) td:nth-of-type(3),
    .tb-07 tr:nth-of-type(2) td:nth-of-type(4){width: 125px; min-width: 125px;}
    
    .tb-07 th:nth-of-type(1),
    .tb-07 td:nth-of-type(1){position: sticky; left: -1px; width: 115px; min-width: 115px;}
    
    .tb-07 td figure{max-width: 80px;}
}

.tb-08 th{text-align: center;}
.tb-08 td{width: 13.2%; text-align: center;}
.tb-08 td:nth-of-type(1){width: 20.8%;}
.tb-08 td:nth-of-type(1){background: #f2f2f2;}

@media (max-width: 1000px){
    .tb-08 tr:nth-of-type(1) th:nth-of-type(1),
    .tb-08 td:nth-of-type(1){position: sticky; left: -1px;}
    
    .tb-08 td{width: 100px; min-width: 100px;}
    .tb-08 td:nth-of-type(1){width: 120px; min-width: 120px;}
}


/* -----------------------
Table used all detail pages --> Add new class
-------------------------- */
[class*="tb-C"] th,
[class*="tb-C"] td{text-align: center;}

@media (min-width: 768px){
    .tb-C2{max-width: 800px;}
    .tb-C2 td{width: 50%;}

    .tb-C3 th,
    .tb-C3 td{width: 33.333%;}
    .tb-C3 td[colspan="2"]{width: 66.667%;}

    .tb-C4 th,
    .tb-C4 td{width: 29.833%;}
    .tb-C4 tr:nth-of-type(1) th:nth-of-type(1),
    .tb-C4 td.colFix{width: 10.5%;}
    .tb-C4 td[colspan="2"]{width: 59.666%;}

    .tb-C5 td{width: 21%;}
    .tb-C5 td.colFix{width: 10.5%;}
    .tb-C5 td:nth-of-type(2){width: 26.5%;}

    .tb-C6 td{width: 15%;}
    .tb-C6 td.colFix{width: 10.5%;}
    .tb-C6 td.col2{width: 29.5%;}

    .tb-C7 td{width: 12.785%;}
    .tb-C7 td.colFix{width: 10.5%;}
    .tb-C7 td.col2{width: 25.575%;}

    .tb-C8 td{width: 12.785%;}
    .tb-C8 td.colFix{width: 10.5%;}
}

@media (max-width: 767px){    
    [class*="tb-C"] tr:nth-of-type(1) th:nth-of-type(1){position: sticky; left: 0; background: #e6ebf4; border-left: none; border-right: none;}
    
    [class*="tb-C"] td{width: 160px; min-width: 160px;}
    [class*="tb-C"] td.colFix{width: 100px; min-width: 100px; position: sticky; left: 0; background: #fff; border-left: none; border-right: none;}
    [class*="tb-C"] td:nth-of-type(2){width: 210px; min-width: 210px;}
    
    [class*="tb-C"] tr:nth-of-type(1) th:nth-of-type(1):before,    
    [class*="tb-C"] tr:nth-of-type(1) th:nth-of-type(1):after,
    [class*="tb-C"] td.colFix:before,
    [class*="tb-C"] td.colFix:after{content: ''; position: absolute; top: 0; width: 1px; height: 100%; background: #c4cbd8;}
    
    [class*="tb-C"] tr:nth-of-type(1) th:nth-of-type(1):after,
    [class*="tb-C"] td.colFix:after{right: -1px;}
    
    [class*="tb-C"] tr:nth-of-type(1) th:nth-of-type(1):before,
    [class*="tb-C"] td.colFix:before{left: 0;}
    
    .tb-C3 td:nth-of-type(2){width: 160px; min-width: 160px;}
    .tb-C4 td[colspan="2"]{width: 210px; min-width: 210px;}
    .tb-C8 td:nth-of-type(2){width: 160px; min-width: 160px;}
}






/* Link */
.list-link li:not(:last-of-type){margin-bottom: 2rem;}
.list-link a{font-weight: 500; color: #0c4097; text-decoration: underline; text-underline-offset: 0.5em; line-height: 2;}
.list-link a:after{content: ''; width: 1.25em; height: 1.25em; background: url("../img/products/arrow-circle_blue.png") no-repeat center center/100% 100%; display: inline-block; margin-left: 0.6em; position: relative; top: 0.2em;}
.list-link a:hover{text-decoration: none;}


/* Inquiry */
.inquiry{margin: 0;}



/* Detail 004 - Tech */
.nav-anchor{display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding-bottom: 6rem;}
.nav-anchor a{width: 18.9%; border: 2px solid #0c4097; height: 5.4rem; display: flex; justify-content: center; align-items: center; align-content: center; color: #0c4097; line-height: 1.2; border-radius: 54px; font-weight: 500; padding: 0 1rem; text-align: center; transition: 0.3s;}
.nav-anchor a:after{content: ''; border: solid #0c4097; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-left: 0.5em;}
.nav-anchor a.active,
.nav-anchor a:hover{background: #0c4097; color: #fff;}
.nav-anchor a.active:after,
.nav-anchor a:hover:after{border: solid #fff; border-width: 0 1px 1px 0;}

@media (max-width: 1000px) {
    .nav-anchor{padding-bottom: 3rem;}
    .nav-anchor a{width: 49%; margin-bottom: 2%;}
}

.tech-img{text-align: center; padding-top: 2.5rem;}

@media (max-width: 768px) {
    .tech-img{padding-top: 1.5rem;}
	#tech5 .tech-img{margin:0 auto;max-width:240px;}
}

/* Tech1 */
.tech1-list{display: flex; flex-wrap: wrap;}
.tech1-list .item{border: 2px solid #0c4097; border-radius: 10px; width: 31.5%; margin: 0 2.75% 2.75% 0; padding: 2.5rem 3rem 3rem;}
.tech1-list .tit{font-size: 2.4rem; line-height: 1.4; color: #0c4097; font-weight: 500; position: relative; padding-left: 1.67em; margin: 0 0 1rem;}
.tech1-list .titNum{font-size: 1.8rem; line-height: 1.4; position: absolute; top: 0.25em; left: 0; width: 1.45em; height: 1.45em; background: #0c4097; color: #fff; text-align: center; border-radius: 100%; display: block;}
.tech1-list .titS{font-size: 1.6rem; line-height: 1.3; display: block;}
.tech1-list .img{text-align: center; margin: 2rem 0 0 0;}
#tech1 .tech1-list {margin-top:1rem;}

@media (min-width: 769px) {
    .tech1-list .item:nth-of-type(3n){margin-right: 0;}
    .tech1-list .item:nth-last-of-type(1),
    .tech1-list .item:nth-last-of-type(2),
    .tech1-list .item:nth-last-of-type(3){margin-bottom: 0;}
}

@media (max-width: 768px) {
    .tech1-list .item{width: 100%; margin: 0 0 2rem; padding: 2rem;}
    .tech1-list .item:last-of-type{margin: 0;}
    .tech1-list .tit{font-size: 2rem;}
}

/* Tech2 */
@media (min-width: 769px) {
    .tech2-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .tech2-box .inner{width: 71.2%;}
    .tech2-box .img{width: 25.8%; text-align: center;}

    .tech2-box2{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .tech2-box2 .inner{width: 59.3%;}
    .tech2-box2 .img{width: 37.7%; text-align: center;}
}

@media (max-width: 768px) {
    .tech2-box .inner{margin-bottom: 3rem;}
    .tech2-box2 .inner{margin-bottom: 3rem;}
}

/* Tech3 */
@media (min-width: 769px) {
    .tech3-box{display: flex; flex-wrap: wrap; justify-content: space-between;}
    .tech3-box .inner{width: 47.7%;}
    .tech3-box .img{width: 49.3%; text-align: center;}
}
@media (max-width: 768px) {
    .tech3-box .inner{margin-bottom: 3rem;}
}

/* Tech4 */
.tech4-box{display: flex; flex-wrap: wrap;}
.tech4-box .item{display: flex; justify-content: space-between; flex-wrap: wrap; line-height: 2;}
.tech4-box .img{width: 44.7%; text-align: center;}
.tech4-box .inner{width: 51.3%;}
.tech4-box .tit{font-size: 2rem; line-height: 1.6; margin: 0 0 5px;}

@media (min-width: 769px) {
    .tech4-box .item{width: 48%; margin: 0 4% 4% 0;}
    .tech4-box .item:nth-of-type(2n){margin-right: 0;}
    .tech4-box .item:nth-last-of-type(1),
    .tech4-box .item:nth-last-of-type(2){margin-bottom: 0;}
}

@media (max-width: 768px) {
    .tech4-box .item{width: 100%; margin: 0 0 3rem;}
    .tech4-box .item:last-of-type{margin: 0;}
}

/* Tech5 */
.tech5-box{display: flex; flex-wrap: wrap;}
.tech5-box .item{border: 2px solid #0c4097; border-radius: 10px; padding: 3rem; display: flex; justify-content: space-between; flex-wrap: wrap;}
.tech5-box .inner{width: 44.4%; line-height: 2;}
.tech5-box .img{width: 49.6%;}
.tech5-box .img p{margin-top: 5px;}

.tech5-box2{border: 2px solid #0c4097; border-radius: 10px;}

@media (min-width: 769px) {
    .tech5-box .item{width: 48.5%; margin: 0 3% 3% 0;}
    .tech5-box .item:nth-of-type(2n){margin-right: 0;}
    .tech5-box .item:nth-last-of-type(1),
    .tech5-box .item:nth-last-of-type(2){margin-bottom: 0;}
    
    .tech5-box2{display: flex; justify-content: space-between; flex-wrap: wrap; padding: 3rem;}
    .tech5-box2 .inner{width: 54.3%;}
    .tech5-box2 .img{width: 42.7%;}
}

@media (max-width: 768px) {
    .tech5-box .item{padding: 2rem; margin: 0 0 2rem; width: 100%;}
    .tech5-box .item:last-of-type{margin: 0;}
    .tech5-box .img img{width: 100%;}
    
    .tech5-box2{padding: 2rem;}
    .tech5-box2 .inner{margin: 0 0 2rem;}
    .tech5-box2 .img{text-align: center;}
}

/* productDetail */
.productDetail .row {margin-bottom: 80px;}
.productDetail .row .caption {font-size: 1.2rem; margin-top: 0.8em;}
.productDetail .listImg {margin-top: 4rem; justify-content: flex-start; align-items: stretch;}
.productDetail .listImg li {width: 31.44%; margin: 0 2.84% 2.84% 0;}
.productDetail .listImg li:nth-of-type(3n) {margin-right: 0;}
.productDetail .listImg li a {height: 100%; padding: 40px; border: 2px solid #0C4097; border-radius: 10px; background: #fff; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;}
.productDetail .listImg li a figure {width: 100%; position: relative; overflow: hidden; text-align: center;}
.productDetail .listImg li a figure:before{content: ''; padding-bottom: 81.667%; display: block;}
.productDetail .listImg li a figure::after {content: ''; display: block; width: 40px; height: 40px; background: url("../img/common/ic-zoom2.jpg") no-repeat top left/100% 100%; position: absolute; top: 0; right: 0;}
.productDetail .listImg li .noLink figure::after {display: none;}
.productDetail .listImg li .noLink:hover figure img {opacity: 1;}
.productDetail .listImg li .noLink:hover {color: #222;}
.productDetail .listImg li a figure img {transition: 0.3s; width: auto; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.productDetail .listImg li a:hover figure img {opacity: .8;}
.productDetail .listImg li a p {font-size: 1.8rem; text-align: center; margin-top: 20px;}
.productDetail .listImg li a:hover {color: #0C4097;}
.productDetail .listImgType2 li {width: 18.3%; margin: 0 2.12% 2.12% 0 !important;}
.productDetail .listImgType2 li a {display: block; background: #fff;}
.productDetail .listImgType2 li a figure {border: 1px solid #cacbcb; width: 100%; position: relative; overflow: hidden; text-align: center;}
.productDetail .listImgType2 li a figure:before{content: ''; padding-bottom: 75.79%; display: block;}
.productDetail .listImgType2 li a figure::after {content: ''; display: block; width: 40px; height: 40px; background: url(../img/common/ic-zoom2.jpg) no-repeat top left/100% 100%; position: absolute; top: 0; right: 0;}
.productDetail .listImgType2 li:nth-of-type(5n) {margin-right: 0 !important;}
.productDetail .listImgType2 li a figure img {transition: 0.3s; width: auto; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.productDetail .listImgType2 li a:hover figure img {opacity: .8;}
.productDetail .listImgType2 li a:hover {color: #0C4097;}
.productDetail .listImgType2 li a .num p:first-child {font-size: 1.8rem; font-weight: bold; position: relative; line-height: 1; padding-left: 1rem; margin: 1.5rem 0 1rem;}
.productDetail .listImgType2 li a .num p:first-child::before {content: ''; width: 4px; height: 100%; border-radius: 4px; background: #0c4097; position: absolute; top: 0; left: 0;}
.productDetail .listImgType2 li a .num p:last-child {font-size: 1.6rem; position: relative; padding-left: 27px;}
.productDetail .listImgType2 li a .num p:last-child span {position: absolute; top: 3px; left: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1; color: #fff; background: #0c4097; font-family: 'Barlow', sans-serif; font-size: 1.4rem; font-weight: bold; margin-right: 5px;}

.productDetail .download {margin-bottom: 8rem;}
.productDetail .download .tit-28 {color: #222222;}
.productDetail .download a {color: #0c4097; text-decoration: underline; text-underline-offset: 5px;}
.productDetail .download a:hover {text-decoration: none;}

.modalDetail {display: none;}
.modalDetail .modal-inner > figure {text-align: center;}
.modalDetail .modal-inner > p {font-size: 1.8rem; text-align: center; margin-top: 2rem;}
.modalDetail .modal-inner .num {text-align: left;}
.modalDetail .modal-inner .num p:first-child {font-size: 1.8rem; font-weight: bold; position: relative; line-height: 1; padding-left: 1rem; margin: 2rem 0 1rem;}
.modalDetail .modal-inner .num p:first-child::before {content: ''; width: 4px; height: 100%; border-radius: 4px; background: #0c4097; position: absolute; top: 0; left: 0;}
.modalDetail .modal-inner .num p:last-child {font-size: 1.6rem; position: relative; padding-left: 27px;}
.modalDetail .modal-inner .num p:last-child span {position: absolute; top: 3px; left: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1; color: #fff; background: #0c4097; font-family: 'Barlow', sans-serif; font-size: 1.4rem; font-weight: bold; margin-right: 5px;}

.fancybox-content {max-width: 740px; width: 95%; padding: min(6vw,6rem); border-radius: 20px; text-align: center;}
.fancybox-button {width: 35px; height: 35px;}
.fancybox-button svg path {fill: white;}
.fancybox-slide--html .fancybox-close-small {background: #0c4097; border-radius: 50%; right: 2rem; top: 2rem; opacity: 1; padding: 5px;}

.productDetail01 .listImg01 img {height: 294px;}
.productDetail02 .listImg01 img {height: 260px;}
.productDetail03 .listImg01 img {height: 294px;}

.modalDetail02{padding: min(6vw,6rem) 0; max-width: 760px;}

@media (max-width: 768px){    
    .productDetail .row {margin-bottom: 40px;}
    
    .productDetail .listImg li {width: 48%; margin: 0 4% 4% 0 !important;}
    .productDetail .listImg li:nth-of-type(2n) {margin-right: 0 !important;}
    .productDetail .listImg li a {padding: 5vw;}
    .productDetail .listImg li a figure::after {width: 20px; height: 20px;}

    .productDetail .listImgType2 li {width: 48%; margin: 0 4% 8% 0 !important;}
    .productDetail .listImgType2 li:nth-of-type(2n) {margin-right: 0 !important;}
    .productDetail .listImgType2 li a figure::after {width: 20px; height: 20px;}

    .productDetail .arr-r::after {width: 20px; height: 20px; margin-left: 10px;}

    .fancybox-content {padding: 8rem 2rem 4rem; border-radius: 10px;}
    .modalDetail02{padding: 8rem 0 4rem;}
}