@charset "utf-8";

.sub_wrap {position: relative; width:100%; padding:100px 0 146px 0;}
.product_wrap {position: relative; width:100%; background:#f4f4f4; padding:40px 0 0 0;}
.product_wrap .inner {border-top:1px solid #e4e4e4; border-left:1px solid #e4e4e4; border-right:1px solid #e4e4e4; background:#fff; height:100%;}
h3 {font-size:30px; font-weight: 700;}

/* product */
.prod_wrap {position: relative; width:100%; display: flex; flex-wrap: nowrap; flex-direction: row-reverse;}
.prod_wrap .prod_menu {width:250px; background:#f9f9f9; font-size:0; }
.prod_wrap .prod_menu li {position: relative; border-bottom:1px solid #e4e4e4;  border-left:1px solid #e4e4e4; font-size:16px; letter-spacing: -.5px;}
.prod_wrap .prod_menu li a {display: block;  width:100%; height:100%; color:#999999; padding:12px 0 12px 16px; box-sizing: border-box;}
.prod_wrap .prod_menu li.on {border-left:#fff; background:#fff;}
.prod_wrap .prod_menu li.on a {color:#f01111; font-weight: 600; }
.prod_wrap .prod_menu li.on a::after {content: ''; position: absolute; width:3px; height:50px; background:#f01111; right:0; top:0;}
.prod_wrap .prod_cont {flex:1 1 auto; padding:60px 70px 170px 70px; width: calc(100% - 390px);}
.prod_wrap .prod_cont h4 {font-size:18px; font-weight: 700; color:#f01111; margin-bottom:35px;}
.prod_wrap .prod_cont h4::before {content: ''; width:18px; height:3px; background:#f01111; display: inline-block; vertical-align: middle; margin-right:10px;}
.prod_wrap .prod_cont .product {position: relative; width:100%; padding-bottom:60px;}
.prod_wrap .prod_cont .product:last-child {padding-bottom:0;}
.prod_wrap .prod_cont .product h3 {margin-bottom:15px;}

 .product .img_wrap {display: flex; width:100%; position: relative; gap:20px; margin-bottom:20px;}
 .product .img_wrap > div {flex:1 1 55%; border:1px solid #e4e4e4;}
 .product .img_wrap > div:first-child {flex:1 1 45%;}

.table_wrap {overflow-x: scroll; width:100%; position: relative;}
.table_wrap table {width:100%; position: relative; border-top:2px solid #f01111;}
.table_wrap table thead th {background:#f9f9f9; color:#444444; border-right:1px solid #e2e2e2; font-weight: 400; vertical-align: middle; padding:20px 0;}
.table_wrap table tr {border-bottom:1px solid #e2e2e2;}
.table_wrap table thead tr:nth-child(3) th {background: #fff;}
.table_wrap table td {border-right:1px solid #e2e2e2;padding:20px 0; text-align: center; color:#999999;}
.table_wrap table td:last-child, .table_wrap table thead tr:first-child th:last-child {border-right: none;}

/* about us */
.about > div {padding-bottom:40px;}
.about > div:last-child {padding-bottom:0;}
.about > div > p {font-size:18px; line-height: 24px; margin-bottom:30px;}
.about > div > p > span {font-size:30px; font-weight: 700; padding-right:10px;}
.about .img_wrap {display: flex; flex-wrap: wrap; gap:50px 7%;}
.about .img_wrap h3 {width:100%;}
.about .img_wrap > div {text-align: center; font-size:0; box-sizing: border-box; flex:1 1 45%;  }
.about .img_wrap > div h4 {font-size:25px; margin-bottom:30px;}
.about .img_wrap > div ul {margin-top:50px;}
.about .img_wrap > div ul li {font-size:18px; text-align: left; position: relative; padding:0 0 30px 10px;}
.about .img_wrap > div ul li::before {content: ''; display: inline-block; position: absolute; left:0;  top:11px;  width:5px; height:5px; border-radius: 100%; background:#5F5F5F;}

/* contac us */
.contact {display: flex; width:100%; position: relative; flex-wrap: wrap;}
.contact > div {width:calc(50% - 20px);}
.contact > div:first-child {width:50%; padding-right:20px; }
.contact > div .addr {position: relative; margin-top:30px;}
.contact > div .addr li:nth-last-child(2) {padding-top:35px;}
.contact > div a {color:#0031d2; text-decoration: underline;}
.contact > div .inpu {position: relative; width:100%; display: block;}
.contact > div .inpu li { padding:17px 0; border-bottom:1px solid #e0e0e0;}
.contact > div .inpu li:last-child {border-bottom:none; text-align: center;}
.contact > div .inpu input {height: 50px;  line-height: 50px; margin-left:20px; width: 86%;}
.contact > div .inpu textarea {height:190px; width:100%; margin-top:10px;}
.contact > div .inpu button {width:80%; padding:27px 0; color:#fff; font-weight: 700; background:#f01111; border-radius: 50px; margin-top:80px;}
.contact > div .filebox {width: calc(100% - 117px);}
.contact > div .filebox  input.upload-hidden {width:1px; height:1px;}
.contact > div .filebox  input.upload-name {width:calc(100% - 175px); background:#fff !important; padding:0;}
.contact > div .filebox label {width:97px; height:43px; line-height:43px; background:#000; font-size:16px; color:#fff; text-align: center; border-radius: 20px;}

@media screen and (max-width:1024px) {
	
	/* product */
	.prod_wrap {flex-direction: row; flex-wrap: wrap; }
	.prod_wrap .prod_menu {width:100%;}
	.prod_wrap .prod_menu li {display: inline-block; width:calc(50% - 1px);}
	.prod_wrap .prod_menu li a {padding:12px 16px;}
	.prod_wrap .prod_cont {padding:70px 0 170px 0; width: 100%;}
	
}

@media screen and (max-width:768px) {	
	
	/* about 8 */
	.about .img_wrap > div {flex:1 1 100%; margin:50px 0 0 0;}
	
	/* contac us */
	.contact > div {width:100%;}
	.contact > div:first-child {width:100%; padding-right:0; }
	.contact > div .inpu li {height:auto; line-height: normal; padding-top:20px;}
	.contact > div .inpu li  b {display: block;}
	.contact > div .inpu input {margin-left:0; width:100%;}	
	.contact > div .filebox {width: 100%;}
	.contact > div .filebox  input.upload-name {width:calc(100% - 130px);}
		
}

@media screen and (max-width:425px) {	
	
	/* product */
	 .product .img_wrap {flex-wrap: wrap;}
	
	
}

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