html {height:100%}

#wrap {height:100%; position:relative; width:100%;  display:inline-block; }
#container {  width:100%; display:inline-block;  }

.main_con {width:100%;   margin:0 auto; font-size:17px;  }
.in {width:100%; margin:0 auto;  max-width:1700px;  }
.flex {display:flex}

h3 {font-size:4em; font-weight: 800}

a.basic_btn {background-color:#0d2997;   font-size:1rem; box-sizing:border-box; padding:0 20px; width:150px; line-height:40px; color:#fff; border-radius:5px; display:flex; transition: all 0.3s ease-out; }
a.basic_btn:after {content:'→'; margin-left:auto}
a.basic_btn:hover {background-color:#1739c1} 
a.basic_btn + a.basic_btn {margin-left:5px}


section.sub_vi {background-color:var(--main_c); color:#fff; position:Relative; padding:200px 0; margin-bottom:100px;   }
.sub_vi .in {max-width:1700px}
.sub_vi h3 {width:100%; font-size:2.7em;  }


.vi_wrap {
	max-width: 1800px;
	margin-left: auto;
	overflow-x: hidden;
}

@media(min-width:2200px) {
	.vi_wrap {
		max-width: 2000px;
	}
}

.vi_wrap .titbox {
	font-size: 3em;
	line-height: 1.3;
	font-weight: 700;
	margin-bottom: 60px;
	margin-top: 150px;
}

.vi_wrap .titbox b {
	color: var(--main_c)
}

.vi_wrap .titbox p {
	font-weight: 300;
	line-height: 1.2;
	color: #555;
	margin-top: 10px;
}

.vi_wrap .titbox {
	letter-spacing: -2px;
}

.vi_wrap .titbox * {
	letter-spacing: -2px;
}


.swiper-container {
	position: relative;
	margin: 30px 0;
	overflow: hidden;
}

.swiper-container .swiper-wrapper {
	transition-timing-function: linear !important;
	position: relative;
	gap: 40px;
}

.swiper-container .swiper-slide {
	width: 30%;
	padding-top: 30%;
	overflow: hidden;
	background-blend-mode: multiply;
}



.swiper-slide .txtbox {
	padding: 30px;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
}

.swiper-slide h4 {
	color: #fff;
	font-size: 1.6em;
	margin-bottom: 5px;
}

.swiper-slide p {
	color: #ddd;
	font-size: 1.2em;
}

@media(max-width:900px){
	.vi_wrap .titbox{font-size:1.4em; margin:60px 0 30px 0; padding:0 3%; box-sizing:border-box;}
	.swiper-container .swiper-wrapper{gap:20px;}
	.swiper-container .swiper-slide{width:55%; padding-top:55%;}
	.swiper-slide .txtbox{font-size:.8em; padding:10px;}
	.swiper-slide h4{font-size:1.2em;}
	.vi_wrap .titbox p{letter-spacing:-1px;}
}

.about{ padding:160px 0; box-sizing:border-box; position:relative; margin-top:80px;}
.about .flex{gap:50px; align-items:end; }
.about .imgbox{width:45%;}
.about .imgbox img{border:15px solid #fff; box-sizing:border-box; width:100%;}
.about .txtbox{width:55%; padding-bottom:70px;}
.about b{color:#fbf4e8; font-weight:800; font-size:13em; letter-spacing:1px; font-family:'Montserrat'; position:absolute; top:30px; left:-60px; }
.about h3{font-size:5.7em; display: flex; align-items: end; gap: 18px;}
.about h3 img{width:50%; border:10px outset var(--main_c); box-sizing:border-box; padding:20px 40px; box-sizing:border-box; background:#fff; }
.about span{font-size:1.3em; color:#555; position: relative; top:25px;}
.about p{font-size:1.4em; margin-top:20px; line-height:1.5;}
.about strong{color:var(--main_c)}

.about .bg {transition: all 1s ease-out; content:''; position:absolute; bottom:0; left:0; width:0; height:65%; background:#ffd07d; z-index:-1;}
.about.active .bg {width:65%; }

@media(max-width:900px){
	.about {padding:0; margin-top:60px;}
	.about .flex{flex-direction:column-reverse; gap:30px;}
	.about .imgbox{width:70%;}
	.about b{display:none;}
	.about .txtbox{width:100%; padding-bottom:0;}
	.about h3{font-size:2.6em;}
	.about p{font-size:1em; }
	.about .bg{top:-20px;}
	.about h3 img{padding:10px; border-width:5px; width:50%;}
	.about span{font-size:.9em; top:18px;}
}


.product_m{padding-top:120px;font-size:16px;font-weight:500;line-height:1.65;color:#777;font-family:'Pretendard'; overflow:hidden;}
.product_m .titbox{display:flex; gap:30px; margin-bottom:50px; align-items:flex-end; font-size:1.7em;}
.product_m .titbox h3 {line-height:1; }
.product_m .titbox p{color:#555; font-size:25px}

.product_m ul{display:flex;}
.product_m ul li{display:flex;justify-content:center;align-items:center;overflow:hidden;width:25%;  }
.product_m ul li a{overflow:hidden;position:relative;display:block;width:100%;height:100%;transition:all .3s}
.product_m ul li a:before{display:block;content:"";position:absolute;bottom:0;left:0;width:100%;height:100%; background:linear-gradient(180deg, rgb(0 0 0 / 0%) 79%, rgb(0 0 0 / 32%)); transition:all .3s}
.product_m ul li .txt{position:absolute;bottom:30px;left:30px;z-index:1;transition:all .3s}
.product_m ul li .txt span{font-size:16px;font-weight:600;color:rgba(255,255,255,.4);}
.product_m ul li .txt p{margin-top:5px;font-size:28px;font-weight:600;color:#fff; line-height:1.2;}
.product_m ul li img{position:relative;left:50%;top:50%;z-index:-1;transform:translate(-50%,-50%); max-width:100%; transition:all .3s}


@media(hover:hover){
	.product_m ul li:hover a{width:87%;height:90%}
	.product_m ul li:hover img{transform:scale(1.2) translate(-50%,-50%)}
	.product_m ul li:hover .txt{opacity:0}
	.product_m ul li:hover a:before{opacity:0}  
}

@media(max-width:900px){
	.product_m {padding-top:60px;}
	.product_m .titbox{flex-direction:column; align-items:start; padding:0 3%; box-sizing:border-box; gap:10px; margin-bottom:30px;}
	.product_m .titbox{font-size:1em;}
	.product_m .titbox h3{font-size:2.6em; }
	.product_m .titbox p{font-size:1.1em;}

    .product_m ul{flex-wrap:wrap}
    .product_m ul li{width:50%}
    .product_m ul li img{min-width:auto;width:100%}
    .product_m ul li .txt p{font-size:1.3em;}
}






i.more{margin-left:10px; border: 2px solid #ddd; color:#ccc; padding:10px;box-sizing:border-box;transform: rotate(316deg);border-radius: 47px;font-size:.7em; }

.main_bn{background: url('/common/img/bg2.png') no-repeat bottom / cover , rgba(255, 255, 255, 0.7); background-blend-mode:hue; padding-top:150px; box-sizing:border-box;}
.main_bn *{color:#fff;}
.main_bn i.more{padding:25px; font-size:1.7em;}

.main_bn .l_bnr li{position:sticky;top:100px; display:flex;flex-wrap:wrap;align-content:space-between;width:33.33%; padding:150px 50px; box-sizing: border-box; 
background:url('/common/img/cert.png') bottom / cover no-repeat, rgba(0, 0, 0, 0.4); background-blend-mode:multiply;}
.main_bn .l_bnr li:nth-child(2){/* transform:translateY(70px); */background:url('/common/img/report.png') 0 0 / cover no-repeat, rgba(0, 0, 0, 0.4); left:33.33%;}
.main_bn .l_bnr li:nth-child(3){/* transform:translateY(140px); */background:url('/common/img/news.png') right / cover no-repeat, rgba(0, 0, 0, 0.4); left:66.66%;}

.main_bn .l_bnr .r_txt{position:absolute;top:30px;right:40px;font-size:13px;font-weight:800;text-align:right;text-transform:uppercase; }
.main_bn .l_bnr li > .txtbox{width:100%}
.main_bn .l_bnr .txtbox h5{margin-bottom:15px;font-size:2.5em;font-weight:700;line-height:1.2;white-space:pre-line}
.main_bn .l_bnr .txtbox p{opacity:.9; font-size:1.2em; line-height:1.5;}

@media(max-width:900px){
	.main_bn{padding-top:80px; background:none;}
	.main_bn .l_bnr li{width:100%; padding:80px 30px; }
	.main_bn .l_bnr .txtbox h5{font-size:2em;}
	.main_bn .l_bnr .txtbox p{font-size:1.1em;}
}


.contact{ background: url('/common/img/company.png') no-repeat center / cover , rgba(0, 0, 0, 0.6); background-blend-mode:multiply; background-attachment: fixed;  background:var(--main_c);width:100%; padding:80px 50px; box-sizing:border-box; display:flex; justify-content:center;flex-direction:column}
.contact *{color:#fff}
.contact .in{display:flex; justify-content:space-between;}
.contact .txt_wrap{display:flex; align-items:center; gap:40px;}
.contact h3{font-size:5.7em; line-height:.8;}
.contact p{font-size:1.5em; margin-top:30px; color:#ededed;}

.contact a{color:#ededed; font-size:1.5em;}
.contact i.more{color:#ededed; }
.contact .imgbox{width:50%; height:350px; background:url('/common/img/main_contact.png') center / cover no-repeat; filter: grayscale(.3);}

@media(max-width:900px){
	.contact {padding:80px 30px;}
	.contact .in{flex-direction:column; gap:40px;}
	.contact .txt_wrap{flex-direction:column; align-items:start; gap:20px;}
	.contact h3{font-size:2.6em;}
	.contact p{font-size:1.1em;}
	.contact a{font-size:1em;}
	.contact .imgbox{width:100%; height:200px;}
}

footer{background:#f5f5f5; padding:50px 3%;  font-size:1em;  }
footer .in{max-width:1700px !important; margin:0 auto; text-align:left; line-height:1.8; display:flex; gap:80px; align-items:start;}
footer img{width:180px;}
footer *{color:#555;}
footer	h2{font-size:1.2em; margin-bottom:10px;}

@media (max-width: 900px) { 
	footer .in{flex-direction:column; gap:20px; font-size:.85em;}
	footer img{width:130px;}
}